Loop through array and add event listener "click" to each

Question

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!

And what is `addEventListener`? Where are you referencing the element to add the onclick? — epascarello, Sep 12 '16 at 14:04
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Mehdi Dehghani, Sep 12 '16 at 14:07
Related [adding 'click' event listeners in loop](http://stackoverflow.com/questions/8909652/adding-click-event-listeners-in-loop) — Mehdi Dehghani, Sep 12 '16 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, Sep 12 '16 at 14:09

Zakaria Acharki · Accepted Answer · 2016-09-12T14:15:00.100

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>

score 4 · Answer 2 · answered Sep 12 '16 at 14:07

4

You should be using

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

so in your case

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

answered Sep 12 '16 at 14:07

epascarello

204,599
20
195
236

Loop through array and add event listener "click" to each

2 Answers2

Linked