El problema es el siguiente: he creado un archivo JS separado, en el que quiero iterar a través de elementos que pertenecen a una determinada clase audioz . En la segunda línea de mi código JS, uso addEventListener en item , sin embargo, el código no parece funcionar con item , solo si pongo document , pero el resultado sigue siendo defectuoso. ¿Qué estoy haciendo mal en la iteración?
JS:
document.querySelectorAll('.audioz').forEach(item => { item.addEventListener('keydown', function(e) { const ss = document.querySelector(`audio[data-key="${e.keyCode}"]`); console.log(ss); ss.play(); }) })HTML:
<audio class="audioz" data-key="65" src="sounds/clap.wav"></audio> <audio class="audioz" data-key="83" src="sounds/hihat.wav"></audio> <audio class="audioz" data-key="68" src="sounds/kick.wav"></audio> <audio class="audioz" data-key="70" src="sounds/openhat.wav"></audio> <audio class="audioz" data-key="71" src="sounds/boom.wav"></audio> <audio class="audioz" data-key="72" src="sounds/ride.wav"></audio> <audio class="audioz" data-key="74" src="sounds/snare.wav"></audio> <audio class="audioz" data-key="75" src="sounds/tom.wav"></audio> <audio class="audioz" data-key="76" src="sounds/tink.wav"></audio>Actualmente está agregando un detector de eventos keydown a cada etiqueta de audio . Sin embargo, la etiqueta audio está oculta, por lo que no puede ejecutar el evento keydown en ella. Por lo tanto, su código no funcionará.
Agregue el detector de eventos al documento en su lugar.
document.addEventListener('keydown', function(e) { const ss = document.querySelector(`audio[data-key="${e.keyCode}"]`); console.log(ss); ss.play(); }) <audio class="audioz" data-key="65" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio> press the A keyPuede adjuntar un oyente al elemento principal para cada <audio> . Esto evita cierta contaminación de eventos a nivel de documento.
const audiozResults = document.getElementsByClassName("audioz"); for (const result of audiozResults) { const dataKey = +result.getAttribute("data-key"); result.parentElement.addEventListener("keydown", evt => { if (evt.keyCode === dataKey) { result.play(); } }); } <audio class="audioz" data-key="65" src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio> press the A key