Runny Yolk Runny Yolk - 8 months ago 27
Javascript Question

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 = []"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!


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 = []"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>