for(var i = 0 ; i < document.querySelectorAll(".btn").length; i++){ var btn = document.querySelectorAll(".btn")[i]; var btnName = btn.innerHTML; btn.addEventListener("click",function(){ console.log(btnName); }); } body{ margin: 0; } *{ box-sizing: border-box; } .btn{ border-style: none; background-color: blue; padding: 10px 20px; margin: 0 20px; color: white; } <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <button class="btn">w</button> <button class="btn">a</button> <button class="btn">s</button> <button class="btn">d</button> <button class="btn">k</button> <script src="script.js"></script> </body> </html>En el código anterior, quiero imprimir el HTML interno del botón en la consola, cuando se hace clic, pero en lugar de obtener un resultado específico para botones específicos, obtengo el mismo valor para cada botón, que es el último HTML interno del botón.
por ejemplo: problema: cuando hago clic en el botón w, "k" se imprime en la consola en lugar de "w". cuando hago clic en el botón a, "a" se imprime en la consola en lugar de "a". cuando hago clic en el botón k, se imprime "k".
resultado deseado: cuando hago clic en el botón w, "w" se imprime en la consola. cuando hago clic en el botón "a" se imprime en la consola. cuando hago clic en el botón k, "k" se imprime en la consola.
¿Cómo puedo imprimir el HTML interno específico de un botón específico?
Deberías almacenar en caché los elementos.
const buttons = document.querySelectorAll(".btn"); for(let i = 0 ; i < buttons.length; i++){ button[i].addEventListener("click",function(){ console.log(this.textContent); }); }o usar para cada uno
function myClick(){ console.log(this.textContent); }); window.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".btn") .forEach(btn => btn.addEventListener("click",myClick)); })Pero en su lugar, POR FAVOR, delegue desde el contenedor estático más cercano
window.addEventListener("DOMContentLoaded", function() { document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target.closest("button.btn"); if (tgt) console.log(tgt.textContent); }); }); window.addEventListener("DOMContentLoaded", function() { document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target.closest("button.btn"); if (tgt) console.log(tgt.textContent); }); }); body { margin: 0; } * { box-sizing: border-box; } .btn { border-style: none; background-color: blue; padding: 10px 20px; margin: 0 20px; color: white; } <div id="container"> <button class="btn">w</button> <button class="btn">a</button> <button class="btn">s</button> <button class="btn">d</button> <button class="btn">k</button> </div>