javascript - 重新加载 KeyDown 和 Click 事件后仅在第二次单击后有效

Question

加载/重新加载页面后，ON/OFF 按钮 上的KeyDown 和Click 事件仅在按下两次后才起作用，一次都没有。

虽然这只是在加载/重新加载后的第一次发生。该行为是之后的预期行为。

我试过 window.onload 没有成功。

这是相关的 JS:

//Button POWER
//event listeners
buttonEl.addEventListener("click", turnOn);
window.addEventListener("keydown", checkEnterKey);
//Storing values
var greenButton = function() {
    buttonEl.style.backgroundColor = "rgba(0, 103, 73, 0.4)";
    buttonEl.style.color = "white";
    buttonEl.textContent = "ON";
}
var whiteButton = function() {
    buttonEl.style.backgroundColor = "rgba(255, 255, 255, 0.7)"
    buttonEl.style.color = "rgb(40, 84, 45)";
    buttonEl.textContent = "OFF";
};
//function called on event
function turnOn(e) {
    if (buttonEl.textContent == "OFF") {
        greenButton();
        for (i = 0; i < keyEl.length; i++) {
            keyEl[i].style.backgroundColor = "rgba(0, 103, 73, 0.4)";
            pEl[i].style.color = "white";
        }
    } else {
        whiteButton();
        for (i = 0; i < keyEl.length; i++) {
            keyEl[i].style.backgroundColor = "rgba(255, 255, 255, 0.7)";
            pEl[i].style.color = "#2d5b3c";
        }
    }
}

function checkEnterKey(e) {
    if (e.keyCode == 13) {
        turnOn();
    }
}

整页演示:

https://jsfiddle.net/s1rwLq3m/

Answer 1

原因是您确定按钮状态的方法 (buttonEl.textContent == "OFF") 不是很安全。特别是，按钮的 textContent 最初在“OFF”文本的任一侧包含一些空白，这第一次未能通过测试。之后，文本被设置为“OFF”且没有空格，测试从那时起成功。

要快速修复，请将 buttonEl.textContent 更改为 buttonEl.textContent.trim()。但是，我建议使用适当的 bool 变量来跟踪不依赖于字符串比较的开/关状态。