I'm trying to iterate through an array of of elements and add an event listener to each one.

Populating the array:

var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

Iterating through the array:

sliders.forEach(function (i){
  addEventListener("click", function(){
    console.log("you clicked slider controler " + this.index + "!");
  });
});

But with this code, whenever I click on any of the sliders I get multiple console.log printouts - once for each slider in the array.

I've looked for similar problems, but I'm still unable to solve this one.

Thanks for any help!

I'm trying to iterate through an array of of elements and add an event listener to each one.

Populating the array:

var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

Iterating through the array:

sliders.forEach(function (i){
  addEventListener("click", function(){
    console.log("you clicked slider controler " + this.index + "!");
  });
});

But with this code, whenever I click on any of the sliders I get multiple console.log printouts - once for each slider in the array.

I've looked for similar problems, but I'm still unable to solve this one.

Thanks for any help!

• javascript
• arrays
• onclicklistener
• addeventlistener

• And what is addEventListener? Where are you referencing the element to add the onclick? – epascarello Commented Sep 12, 2016 at 14:04
• Use i.addEventListener(..) ... – Zakaria Acharki Commented Sep 12, 2016 at 14:06
• Possible duplicate of JavaScript closure inside loops – simple practical example – Mehdi Dehghani Commented Sep 12, 2016 at 14:07
• Related adding 'click' event listeners in loop – Mehdi Dehghani Commented Sep 12, 2016 at 14:08
• Do you mean that it should be sliders[i].addEventListener("click"...? If I do this, then I get an error that "sliders.addEventListener is not a function" – Runny Yolk Commented Sep 12, 2016 at 14:09

2 Answers 2

You should use addEventListener() as :

target.addEventListener(type, listener[, options]);

You could also get the index from forEach :

arr.forEach(function ( element_value,element_index ){ })

Hope this helps.

var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));

sliders.forEach(function (element, index){
  element.addEventListener("click", function(){
    console.log("you clicked slider controler " +index + "!");
  });
});

<div class="sliderControlLi">slider 1</div>
<div class="sliderControlLi">slider 2</div>
<div class="sliderControlLi">slider 3</div>
<div class="sliderControlLi">slider 4</div>

You should be using

EventTarget.addEventListener(...)
^^^^^^^^^^^^

so in your case

sliders.forEach(function (elem){
    elem.addEventListener(...);
});