addEventListener to an array of buttons using a for loop

Question

I am trying to made a series of buttons (in the div included in the html) give an alert when clicked. For that I am using addEventListener. If I just make a list (as showed belowed commented) the result is fine. I try to make the code DRY by using a for loop but it returns me only that "clicked 8" no matter what I press. As far as I understand the flow should start by testing i=0 and continue with the others the same way as with the entire list. So if I press the button[0] I should get "clicked 1" and that's all because the other conditions are false. Thanks in advance.

 // document.querySelectorAll("button")[0].addEventListener("click", function(){alert("clicked 1")}); // document.querySelectorAll("button")[1].addEventListener("click", function(){alert("clicked 2")}); // document.querySelectorAll("button")[2].addEventListener("click", function(){alert("clicked 3")}); // document.querySelectorAll("button")[3].addEventListener("click", function(){alert("clicked 4")}); // document.querySelectorAll("button")[4].addEventListener("click", function(){alert("clicked 5")}); // document.querySelectorAll("button")[5].addEventListener("click", function(){alert("clicked 6")}); // document.querySelectorAll("button")[6].addEventListener("click", function(){alert("clicked 7")}); for(i=0; i<=6; i++) { document.querySelectorAll("button")[i].addEventListener("click", function(){alert("clicked " + (i+1))}); }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

Answer 1

Your issue comes from the behavior of using var keyword to define variable.

In ES6 there were introduced let and const keywords. If you use them you will stop facing issues of var hoisting and scope.

So, you can add a let keyword to your i declaration like this:

for (let i=0; i<=6; i++) {
  //the rest of the code
}

You can read more in this question .

Short summary of the linked question in your issue

When you write i = 0 you are defining the i property in the window object. Then in loop you are incrementing this value. When using i in passed function, javascript is getting the value from window object.

On the other hand, let keyword defines the scope of variable to the scope of your loop, so passed function always contains copy of value, when the function was passed.

Answer 2

It seems like the function keeps track of the value of I even after the loop. Add another variable and bind it to the alert

 // document.querySelectorAll("button")[0].addEventListener("click", function(){alert("clicked 1")}); // document.querySelectorAll("button")[1].addEventListener("click", function(){alert("clicked 2")}); // document.querySelectorAll("button")[2].addEventListener("click", function(){alert("clicked 3")}); // document.querySelectorAll("button")[3].addEventListener("click", function(){alert("clicked 4")}); // document.querySelectorAll("button")[4].addEventListener("click", function(){alert("clicked 5")}); // document.querySelectorAll("button")[5].addEventListener("click", function(){alert("clicked 6")}); // document.querySelectorAll("button")[6].addEventListener("click", function(){alert("clicked 7")}); for(var i=0;i<7; i++) { let out = i+1 document.getElementsByTagName("button")[i].addEventListener("click", function(){alert("clicked " + (out))}); }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

Answer 3

you can dry your code in this way:

document.querySelectorAll('button').forEach((el, i) => {
    el.addEventListener('click', () => alert(`clicked ${i+1}`))
} )

Answer 4

Instead of attaching listeners to all the buttons you might take advantage of event delegation which allows you to add one listener to the parent element ( .set in this case), and catch events from the buttons as they "bubble up" the DOM.

In this example I'm logging the text content of the buttons when they are clicked.

 // Cache the parent element and add a listener const set = document.querySelector('.set'); set.addEventListener('click', handleClick, false); function handleClick(e) { // Extract the nodeName and textContent from // the clicked element const { nodeName, textContent } = e.target; // If it's a button, log the text if (nodeName === 'BUTTON') { console.log(textContent); } }

 <div class="set"> <button class="w drum">w</button> <button class="a drum">a</button> <button class="s drum">s</button> <button class="d drum">d</button> <button class="j drum">j</button> <button class="k drum">k</button> <button class="l drum">l</button> </div>

Additional documentation

• Destructuring assignment