title: Loop through array and add event listener "click" to each
body: <p>I'm trying to iterate through an array of of elements and add an event listener to each one.</p>
  
  <p>Populating the array:</p>
  
  <pre><code>var sliders = [].slice.call(document.getElementsByClassName("sliderControlLi"));
  </code></pre>
  
  <p>Iterating through the array:</p>
  
  <pre><code>sliders.forEach(function (i){
    addEventListener("click", function(){
      console.log("you clicked slider controler " + this.index + "!");
    });
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>I've looked for similar problems, but I'm still unable to solve this one.</p>
  
  <p>Thanks for any help!</p>