CODEWITHSUNDEEP
javascriptarraysonclicklisteneraddeventlistener
Runny Yolk
Runny Yolk

Reputation: 1164

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

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!

Upvotes: 3

Views: 13986

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 12

epascarello
epascarello

Reputation: 207511

You should be using 

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

so in your case

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

Upvotes: 4

Related Questions