Question

加载/重新加载页面后，KeyDown上的Click和ON/OFF button事件仅在按两次后才起作用，而不是按预期的那样。

这只是在加载/重新加载后的第一次。该行为是以后的预期行为。

我尝试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()。但是，我建议使用适当的布尔变量来跟踪不依赖于字符串比较的开/关状态。

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

1 个答案: