Entonces soy un novato de JavaScript. Estoy haciendo una tarea para una clase de diseño web y estamos practicando oyentes de eventos. Así que tuve que asignar variables a 3 divs separados, colocarlos en una matriz, crear una función para que se muestren u oculten, y usar un detector de eventos de botón / clic para llamar a la función para llamarlos u ocultarlos respectivamente. Este es mi código:

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>

Entonces, ¿qué diablos estoy haciendo mal? ¿He comprobado varias veces errores tipográficos, etc. pero todo me parece bien? Sin embargo, todavía no funciona.

0
louisebelcher 27 feb. 2018 a las 22:40

4 respuestas

La mejor respuesta

document.getElementById distingue entre mayúsculas y minúsculas.

Tienes id="showAll" cuando buscas document.getElementById("showALL");.

Elija un caso consistente y debería funcionar.

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 feb. 2018 a las 20:01

Además de su error tipográfico inicial, los identificadores div document.getElementById("showALL"); deben ser document.getElementById("showAll");, los divs tampoco aparecerían sin un tamaño o contenido. Algo como esto debería hacer:

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 feb. 2018 a las 19:59

Como otros han dicho, su carcasa debe ser consistente. Una cosa que puede ayudarlo al depurar este tipo de cosas es abrir herramientas de desarrollador en su navegador (f12 en Chrome) y colocar puntos de interrupción en el JavaScript para que pueda ver y ver cuáles son los valores de sus variables.

0
Ben 27 feb. 2018 a las 19:59

El problema está aquí en tus selectores

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

Su elemento se llama "showAll" y está usando "showALL". Observe la "L" mayúscula.

0
zetawars 27 feb. 2018 a las 19:54