Trouble getting event listener to work properly in javascript

Question

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.

and use a button/click event listener to call the function to call or hide them respectively. where are these? — void
– void, Commented Feb 27, 2018 at 19:41
Without giving away your assignment, I believe you are expected to add something like this: w3schools.com/js/js_htmldom_eventlistener.asp — Phillip Thomas
– Phillip Thomas, Commented Feb 27, 2018 at 19:42
This part of your code looks fine, so I guess the bug is in the actual listeners (which you didn't post) — GalAbra
– GalAbra, Commented Feb 27, 2018 at 19:44

pete · Accepted Answer · 2018-02-27 20:01:04Z

1

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>

edited Feb 27, 2018 at 20:01

answered Feb 27, 2018 at 19:51

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

louisebelcher Over a year ago

I just realized this when someone suggested an edit. I swear to god I looked through this a ton of times and thought they were the same. It's working now though, thanks!

Phillip Thomas · Accepted Answer · 2018-02-27 19:59:01Z

1

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>

answered Feb 27, 2018 at 19:59

Phillip Thomas

1,47911 silver badges21 bronze badges

1 Comment

louisebelcher Over a year ago

It's for a class and I did not write the html portion. there's css in there too, but it is working now. it was just the typo

zetawars · Accepted Answer · 2018-02-27 19:54:02Z

0

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".

answered Feb 27, 2018 at 19:54

zetawars

1,0811 gold badge12 silver badges29 bronze badges

Comments

Ben · Accepted Answer · 2018-02-27 19:59:15Z

0

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.

answered Feb 27, 2018 at 19:59

Ben

7843 gold badges12 silver badges33 bronze badges

1 Comment

louisebelcher Over a year ago

yeah, someone else wrote the html, so for some reason I thought the L's were both uppercase for the id's (which I remember thinking was weird at the time). Sometimes it's just nice to have a second set of eyes

Collectives™ on Stack Overflow

Trouble getting event listener to work properly in javascript

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related