CODEWITHSUNDEEP
javascriptarraysfunctionfor-loopbutton
louisebelcher
louisebelcher

Reputation: 99

Trouble getting event listener to work properly in javascript

So I am a javascript noob. I'm doing an assignment for a webdesign class and we are practicing event listeners. So I had to assign variables to 3 separate divs, place them in an array, create a function to make them display or be hidden, and use a button/click event listener to call the function to call or hide them respectively. this is my code:

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>

So what the heck am I doing wrong? I've checked multiple times for typos, etc. but everything looks ok to me? It's still not working though.

Upvotes: 0

Views: 67

Answers (4)

pete
pete

Reputation: 25081

document.getElementById is case-sensitive.

You have id="showAll" when you are searching for document.getElementById("showALL");.

Pick a consistent case and it should work.

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>

Upvotes: 1

Ben
Ben

Reputation: 784

As others have said your casing needs to be consistent. One thing that may help you out when debugging this sort of thing is to open up developer tools in your browser(f12 in chrome) and placing breakpoints in the javascript so you can step through and see what the values of your variables are.

Upvotes: 0

Phillip Thomas
Phillip Thomas

Reputation: 1469

Aside from your initial typo of the div ids document.getElementById("showALL"); should be document.getElementById("showAll");, the divs would also not appear without a size or contents. Something like this should do:

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>

Upvotes: 1

zetawars
zetawars

Reputation: 1071

The Problem is here in your Selectors

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

your Element is named "showAll" and you are using "showALL". Notice the capital "L".

Upvotes: 0

Related Questions