После перезагрузки события KeyDown & Click работают только после 2-го клика

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», что в первый раз не проходит тест.После этого текст был установлен на «ВЫКЛ» без пробелов, и с тех пор тест завершается успешно.

Для быстрого исправления измените buttonEl.textContent на buttonEl.textContent.trim().Однако я рекомендую использовать правильную логическую переменную, чтобы отслеживать состояние включения / выключения, которое не зависит от сравнения строк.