Estoy creando un teclado virtual que acepta sonido y un color de fondo cuando se presiona una tecla específica en el teclado. Hasta ahora todo bien, implementé el sonido y el efecto de fondo CSS visual en cada tecla, pero solo las teclas de letras, las teclas especiales solo aceptan sonido sin el color de fondo que es clase CSS .is-pressed.

Pequeño ejemplo: capturo las teclas de letras con diferentes clases que son iguales al EventListener que escucha la tecla específica presionada.

 <div class="keyboard__row"> <kbd class="keyboard__key keyboard__key--size2">Tab</kbd> <kbd class="q keyboard__key">Q</kbd> <kbd class="w keyboard__key">W</kbd> <kbd class="e keyboard__key">E</kbd> <kbd class="r keyboard__key">R</kbd> <kbd class="t keyboard__key">T</kbd> <kbd class="y keyboard__key">Y</kbd> <kbd class="u keyboard__key">U</kbd> <kbd class="i keyboard__key">I</kbd> <kbd class="o keyboard__key">O</kbd> <kbd class="p keyboard__key">P</kbd> <kbd class=" keyboard__key">{</kbd> <kbd class=" keyboard__key">}</kbd> <kbd class="keyboard__key keyboard__key--size3">\</kbd> /** * Function that listen for pressed keys and creating visual * effect at the current pressed key. */ document.addEventListener("keypress", function(event) { keySound(event.key); keyAnimation(event.key); }); /** * Adding the audio file to the specific pressed key. */ function keySound(key) { let audio = new Audio("assets/sounds/key-sound.mp3"); audio.play(); } /** * Selecting by class name of each key, and do background effect with timeout. */ function keyAnimation(currentKey) { let activeKey = document.querySelector("." + currentKey); activeKey.classList.add("is-pressed"); setTimeout(function () { activeKey.classList.remove("is-pressed"); }, 100); }