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
– epascarello, Commented Sep 12, 2016 at 14:04
Possible duplicate of JavaScript closure inside loops – simple practical example — Mehdi Dehghani
– Mehdi Dehghani, Commented Sep 12, 2016 at 14:07
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
– Runny Yolk, Commented Sep 12, 2016 at 14:09

Zakaria Acharki · Accepted Answer · 2016-09-12 14:15:00Z

12

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>

edited Sep 12, 2016 at 14:15

answered Sep 12, 2016 at 14:09

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

Comments

epascarello · Accepted Answer · 2016-09-12 14:07:40Z

4

You should be using

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

so in your case

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

answered Sep 12, 2016 at 14:07

epascarello

208k20 gold badges206 silver badges246 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related