Soy un novato jugando con los detectores/controladores de eventos y, en general, me estoy familiarizando con algunos JS (¡primera publicación en StackOverflow!)

Estoy creando una página web simple que cambia el color de fondo según la entrada del usuario (solo caracteres alfabéticos). El usuario presiona una tecla de letra y la página se actualizará a un color con una coincidencia en la primera letra. También imprimirá el nombre del color en la página.

Tengo una gran variedad que almacena nombres de colores CSS, la mayoría de las teclas tienen varios colores que coinciden con la pulsación de tecla o la primera letra del color, y algunas teclas no tienen coincidencias.

Espero que mi código a continuación explique mis intenciones, sin embargo, no puedo hacer que funcione.

 const colors = ["Aquamarine", "Alice Blue", "Antiquewhite", "Aqua", "Azure"] etc etc... // Returns a random colour from the colour arrays const randomiser = colorArr => { return colorArr[Math.floor(Math.random()*colorArr.length)]; } // Event listener window.addEventListener("keypress", e => { let colorsMatchingKeyName = []; function colorFinder(arr) { let keyName = e.key; for (let i = 0; i < arr.length; i++) { if (arr[i].charAt(0) !== keyName) { document.getElementById('currentColor').innerHTML = `Sorry! No colours match up with the ${keyName} key!`; } else if (arr[i].charAt(0) == keyName) { colorsMatchingKeyName.push(arr[i]); } } } colorFinder(colors); // Logging colors to console to test. console.log(colorsMatchingKeyName) // outputs an empty array // Once it is working i'll use the randomiser() function to pick a // random colour from the colorMatchingKeyName array and set the document.style.backgroundColor })

En la actualidad, cada evento clave solo imprime el '¡Lo siento! Sin colores...' mensaje que se muestra en la sentencia if.

¡Estaría enormemente agradecido si alguien pudiera dirigirme al problema en mi código!