Estoy tratando de hacer una serie de botones (en el div incluido en el html) que dan una alerta cuando se hace clic. Para eso estoy usando addEventListener. Si solo hago una lista (como se muestra a continuación comentada), el resultado está bien. Trato de hacer que el código se SECO usando un bucle for, pero solo me devuelve que "hizo clic en 8" sin importar lo que presione. Según tengo entendido, el flujo debe comenzar probando i = 0 y continuar con los demás de la misma manera que con la lista completa. Entonces, si presiono el botón [0], debería hacer "clic 1" y eso es todo porque las otras condiciones son falsas. Gracias por adelantado.
// 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>Su problema proviene del comportamiento de usar la palabra clave var para definir la variable.
En ES6 se introdujeron las palabras clave let y const . Si los usa, dejará de enfrentar problemas de elevación y alcance de var .
Entonces, puede agregar una palabra clave let a su declaración i como esta:
for (let i=0; i<=6; i++) { //the rest of the code }Puedes leer más en estapregunta .
Cuando escribes i = 0 estás definiendo la propiedad i en el objeto window . Luego, en bucle, está incrementando este valor. Cuando se usa i en la función pasada, javascript obtiene el valor del objeto de la window .
Por otro lado, la palabra clave let define el alcance de la variable al alcance de su bucle, por lo que la función pasada siempre contiene una copia del valor, cuando se pasó la función.
Parece que la función realiza un seguimiento del valor de I incluso después del ciclo. Agregue otra variable y vincúlela a la alerta.
// 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>puedes secar tu código de esta manera:
document.querySelectorAll('button').forEach((el, i) => { el.addEventListener('click', () => alert(`clicked ${i+1}`)) } )