así que esto es novato... pero estoy tratando de completar un desafío con más diligencia debida que solo descargar la respuesta,
mi código html actual es:
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Drum Kit</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet"> </head> <body> <h1 id="title">Drum 🥁 Kit</h1> <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> <footer> Made with ❤️ in London. </footer> <script src="index.js" charset="utf-8"></script> </body>mis codigos javascript:
document.querySelector("button").addEventListener("click", handleClick); function handleClick() { alert("I got clicked!"); } document.querySelectorAll(".drum")[1, 2, 3, 4, 5, 6].addEventListener("click", handleClick);esencialmente, el código actual está ejecutando el detector de eventos solo para el primer y último elemento de la matriz, tratando de agregarlo a los 6 pero estoy atascado
gracias a todos
document.querySelectorAll(".drum").forEach(el => el.addEventListener("click", handleClick)); Necesita un forEach para ejecutar código en todos los elementos.
En lugar de adjuntar oyentes a cada botón, agregue uno al contenedor ( set ) y, usando la delegación de eventos , deje que ese oyente capture todos los eventos que "hacen crecer" el DOM de sus elementos secundarios y llame a una función.
const set = document.querySelector('.set'); set.addEventListener('click', handleClick, false); function handleClick(e) { if (e.target.matches('button')) { const { textContent } = e.target; console.log(`Banging the ${textContent} drum!`); } } <h1 id="title">Drum 🥁 Kit</h1> <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> <footer> Made with ❤️ in London. </footer>Documentación adicional