Variable Undefined in Click Event Listener

Question

The Variable slide_titles and slide_background are logging out as undefined in the Click Event Listener. Why is this?

Im trying to add and remove classes using classList. It's not working because the global variables aren't visible inside the on click EventListener.

html

 <div class="product-type">
    <ul>
        <li class="slide__title selected">Cars</li>
        <li class="slide__title" >Motorcycles</li>
        <li class="slide__title">Power Equiptment</li>
        <li class="slide__title">Marine</li>
    </ul>
  </div>

    <ul id="slides">
        <li class="slide cars"></li>
        <li class="slide bikes"></li>
        <li class="slide mower"></li>   
        <li class="slide boat"></li>
    </ul>

javascript

    var slide_titles = document.querySelectorAll('.slide__title');
var slide_background = document.querySelectorAll('.slide');


function removeSelected() {
  for(var i = 0; i < slide_titles.length; i++) {
    if(slide_titles[i].className.indexOf('selected') != -1) {
      console.log("remove");
      slide_titles[i].classList.remove("selected");
    }
  }
}


var clickEvent = function(index) {
slide_titles[i].addEventListener("click", () => {
        removeSelected();
        slide_background[i].classList.add("show");
        slide_titles[i].classList.add("selected");
        console.log(slide_background[i]);

  });
}


   for(var i = 0; i < slide_titles.length; i++) {
      clickEvent(i);
   }

here is the fiddle https://jsfiddle.net/6yjfdftc/1/

Try changing .slide__title and .slide to li.slide__title and li.slide — Aiden Grossman
– Aiden Grossman, Commented Sep 2, 2016 at 3:22
My guess is because the JavaScript is executing before the HTML had loaded. Try wrapping you code in an event handler fired off from the window.onload event — adam0101
– adam0101, Commented Sep 2, 2016 at 3:26
I have made those changes unfortunately the error is still occuring — Jake
– Jake, Commented Sep 2, 2016 at 3:30

Andrew Li · Accepted Answer · 2016-09-02 03:24:06Z

3

It's logging undefined because i is undefined in that scope. Since you pass i to it in your for loop, try this:

var clickEvent = function(index) {
    slide_titles[index].addEventListener("click", () => {
        removeSelected();
        slide_background[index].classList.add("show");
        slide_titles[index].classList.add("selected");
        console.log(slide_background[index]);
    });
}

Here's an updated fiddle.

answered Sep 2, 2016 at 3:24

Andrew Li

58.1k14 gold badges136 silver badges150 bronze badges

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

3 Comments

Jake Over a year ago

i have gone through and made those changes to the clickEvent function. nothing is logging now.

Andrew Li Over a year ago

Have you checked out the fiddle? index is only used in the clickEvent function

Jake Over a year ago

apologies, this has fixed the issue. My mistake. Thank you for your help.

Collectives™ on Stack Overflow

Variable Undefined in Click Event Listener

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related