¿Alguien puede mostrarme por qué si trato de reproducir un sonido así?
const button = document.querySelector(".button"); button.addEventListener("click", function () { document.getElementById("click").play("click.mp3"); });el sonido solo se reproducirá en el primer botón (lo entiendo porque apunta al primer elemento) con la clase .button pero si uso querySlectorAll, ¿no se reproduce en absoluto, por favor?
¿Y cómo puedo hacer que se reproduzca en todos los botones con la clase .button?
Gracias por adelantado.
Gracias a Barmar por sugerir usar un bucle. Me gustó a continuación y funciona muy bien.
for (let button of buttons) { button.addEventListener("click", function () { document.getElementById("click").play("click.mp3"); }); console.log(button); }En mi caso, la solución eficiente será agregarEventListener al padre que contiene estos botones y hacer una condición de verificación de que si el elemento en el que se hace clic tiene alguna clase o atributo de datos, haga que su sonido se reproduzca.
La forma más elegante sería utilizar querySelectorAll , que devuelve una NodeList , que puede convertirse en una matriz .
const buttons = Array.from(document.querySelectorAll(".button")); buttons.forEach(button => { button.addEventListener("click", function () { document.getElementById("click").play("click.mp3"); }); });