Так что я нуб Javascript. Я делаю задание для класса веб-дизайна, и мы практикуем слушателей событий. Поэтому мне пришлось назначить переменные для 3 отдельных элементов div, поместить их в массив, создать функцию, чтобы они отображались или были скрыты, и использовать прослушиватель событий «кнопка / щелчок» для вызова функции, чтобы вызвать или скрыть их соответственно. это мой код:

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");

var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "block";
  }
}

function hideBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "none";
  }
}

showALL.addEventListener("click", function() {
  showBoxes(boxes);
})


// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
  hideBoxes(boxes);
})
<form action="#">
  <input type="button" id="showAll" value="Show All"><br />
  <input type="button" id="hideAll" value="Hide All"><br />
</form>

<div class="box" id="greenBox" style="display:none"></div>
<div class="box" id="redBox" style="display:none"></div>
<div class="box" id="blueBox" style="display:none"></div>

Так какого чёрта я делаю не так? Я проверил несколько раз на опечатки и т.д., но все выглядит нормально для меня? Это все еще не работает, хотя

0
louisebelcher 27 Фев 2018 в 22:40

4 ответа

Лучший ответ

document.getElementById чувствителен к регистру.

У вас есть id="showAll", когда вы ищете document.getElementById("showALL");.

Выберите последовательный случай, и он должен работать.

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");


var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "block";
  }
}

function hideBoxes(boxes) {
  for (i = 0; i < boxes.length; i++) {
    boxes[i].style.display = "none";
  }
}

showALL.addEventListener("click", function() {
  showBoxes(boxes);
})


// The "Hide All" button invokes the hideBoxes method
hideALL.addEventListener("click", function() {
  hideBoxes(boxes);
})
.box {width: 200px; height: 36px;}

#redBox {background-color: #F00;}
#greenBox {background-color: #0F0;}
#blueBox {background-color: #00F;}
<form action="#">
  <input type="button" id="showAll" value="Show All"><br />
  <input type="button" id="hideAll" value="Hide All"><br />
</form>

<div class="box" id="greenBox" style="display:none"></div>
<div class="box" id="redBox" style="display:none"></div>
<div class="box" id="blueBox" style="display:none"></div>
1
pete 27 Фев 2018 в 20:01

Помимо вашей первоначальной опечатки идентификаторов div document.getElementById("showALL"); должно быть document.getElementById("showAll");, div также не будут отображаться без размера или содержимого. Нечто подобное должно сделать:

var greenBox = document.getElementById("greenBox");
var redBox = document.getElementById("redBox");
var blueBox = document.getElementById("blueBox");
var showALL = document.getElementById("showAll");
var hideALL = document.getElementById("hideAll");

var boxes = [greenBox, redBox, blueBox];

function showBoxes(boxes) {
    for (i = 0; i < boxes.length; i++) {
        boxes[i].style.display = "block";
    }
}

function hideBoxes(boxes) {
    for (i = 0; i < boxes.length; i++) {
        boxes[i].style.display = "none";
    }
}

showALL.addEventListener("click", function() {
    showBoxes(boxes);
});

hideALL.addEventListener("click", function() {
    hideBoxes(boxes);
});
<form action="#">
  <input type="button" id="showAll" value="Show All"><br />
  <input type="button" id="hideAll" value="Hide All"><br />
</form>

<div class="box" id="greenBox" style="display:none;background-color:green;height:20px;width:20px"></div>
<div class="box" id="redBox" style="display:none;background-color:red;height:20px;width:20px"></div>
<div class="box" id="blueBox" style="display:none;background-color:blue;height:20px;width:20px"></div>
1
Phillip Thomas 27 Фев 2018 в 19:59

Как уже говорили другие, ваш корпус должен быть последовательным. Одна вещь, которая может вам помочь при отладке такого рода вещей, - это открыть инструменты разработчика в вашем браузере (f12 в chrome) и поместить точки останова в javascript, чтобы вы могли пройти и посмотреть, каковы значения ваших переменных.

0
Ben 27 Фев 2018 в 19:59

Проблема здесь в ваших селекторах

var showALL = document.getElementById("showALL");
var hideALL = document.getElementById("hideALL");

Ваш элемент называется "showAll", и вы используете "showALL". Обратите внимание на заглавную букву "L".

0
zetawars 27 Фев 2018 в 19:54