如何根据 key.event 遍历 JavaScript 数组？

Question

我是一个处理事件 listener/handlers 的新手，通常只是掌握一些 JS（Whosebug 上的第一个 post！）

我正在制作一个简单的网页，它根据用户输入（仅限字母字符）更改背景颜色。用户按下一个字母键，页面将更新为与第一个字母匹配的颜色。它还会将颜色的名称打印到页面上。

我有一个大数组存储 CSS 种颜色的名称，大多数键有多种颜色与颜色的 keystroke/first 字母匹配，有些键没有匹配项。

我下面的代码很有希望解释我的意图，但是我不能完全让它工作。

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
})

目前，每个按键事件只打印if语句中显示的'Sorry! No colours...'消息。

如果有人能指导我解决代码中的问题，我将不胜感激！

Answer 1

你可能想看看这个：

const colors = ["Aquamarine", "Alice Blue", "Antiquewhite", "Aqua", "Azure"]

// 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;
        document.getElementById('currentColor').innerHTML = '';
        for (let i = 0; i < arr.length; i++) {
        const c = arr[i].charAt(0).toLowerCase();

        if (c !== keyName.toLowerCase()) {
                document.getElementById('currentColor').innerText = `Sorry! No colours match up with the ${keyName} key!`; 
            } else if (c == keyName) {
                colorsMatchingKeyName.push(arr[i]);
            } 
        }
    }

    colorFinder(colors);
    const color = randomiser(colorsMatchingKeyName);
    console.log(color)

    document.body.style.backgroundColor = color;
})

<div id="currentColor"></div>

如何根据 key.event 遍历 JavaScript 数组？

How to loop through a JavaScript array based on key.event?

javascript

arrays

if-statement

event-handling