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>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.
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.
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>you can dry your code in this way:
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener('click', () => alert(`clicked ${i+1}`))
} )