代码中空格键按下时按钮未变色，其他按键正常的问题求助

按下空格键时，e.key返回的是空格字符（" "），而你的按钮文本（比如“空格”或“Space”）和这个值不匹配，导致触发条件不成立，所以无法触发变色效果。

需要单独处理空格键的匹配逻辑，以下是两种可行的修改方案：

方案一：给空格键按钮添加特殊标记 #

let buttons = document.querySelectorAll("button");
buttons.forEach(button => {
    const buttonText = button.innerText;
    button.setAttribute('keyname', buttonText);
    button.setAttribute('lowerCaseName', buttonText.toLowerCase());
    // 给空格键按钮添加专属标识
    if (buttonText === "空格" || buttonText.toLowerCase() === "space") {
        button.setAttribute('data-is-space', 'true');
    }
});

document.addEventListener('keydown', function (e) {
    buttons.forEach(button => {
        // 普通按键匹配 + 空格键特殊匹配
        const isMatch = e.key === button.getAttribute('keyname') 
                        || e.key === button.getAttribute('lowerCaseName')
                        || (e.key === " " && button.getAttribute('data-is-space') === 'true');
        
        if (isMatch) {
            button.classList.add("pressed");
            setTimeout(() => button.classList.remove("pressed"), 100);
        }
    });
});

方案二：直接判断按钮文本与空格键的对应关系 #

let buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
    buttons[i].setAttribute('keyname', buttons[i].innerText);
    buttons[i].setAttribute('lowerCaseName', buttons[i].innerText.toLowerCase());
}

document.addEventListener('keydown', function (e) {
    for (let i = 0; i < buttons.length; i++) {
        let isMatch = e.key == buttons[i].getAttribute('keyname') 
                      || e.key == buttons[i].getAttribute('lowerCaseName');
        // 单独匹配空格键和对应按钮
        if (e.key === " " && buttons[i].innerText === "空格") {
            isMatch = true;
        }
        if (isMatch) {
            buttons[i].classList.add("pressed");
            setTimeout(function () {
                buttons[i].classList.remove("pressed");
            }, 100)
        }
    }
})

你也可以用e.code替代e.key来判断，空格键的e.code固定为"Space"，如果按钮文本是“Space”，直接匹配e.code会更准确：

if (e.code === "Space" && buttons[i].innerText === "Space") {
    isMatch = true;
}

内容的提问来源于stack exchange，提问作者Ansh Verma