时间戳

首页 > 解决方案 > 重新加载 KeyDown & Click 事件后，仅在第二次单击后才有效

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

问题描述

加载/重新加载页面后，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/

标签： javascripthtmlcssdom

解决方案

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

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

推荐阅读