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>

Adrian Kokot · Answer 1 · 2021-10-28T07:23:51.083

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.

That was very useful my namesake. It would've taken me a while till I figured it out. — olbapnairda, Oct 28 '21 at 07:28

score 0 · Answer 2 · answered Oct 28 '21 at 07:17

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>

score 0 · Answer 3 · answered Oct 28 '21 at 07:22

0

you can dry your code in this way:

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

answered Oct 28 '21 at 07:22

Reza Mirzapour

390
3
11

score 0 · Answer 4 · answered Oct 28 '21 at 07:49

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

addEventListener to an array of buttons using a for loop

4 Answers4

Short summary of the linked question in your issue