Ну можно просто проверить if( shape1.style.backgroundColor === '#00844B' )
но с добавлением / удалением класса немного проще жить: Помимо того, что оно просто короче... Если захочется изменить цвет, не придется его вручную менять в нескольких местах скрипта)
А если всё же выбираете вариант установки цвета через строку из скрипта, стоит заранее объявить именованные константы, типа const BOX_COLOR = "#00844B";
и везде в коде ссылаться на константу, а не указывать строку напрямую.
document.addEventListener("DOMContentLoaded", __main__);
function __main__() {
let shape1 = document.getElementById('shape-1');
let interval;
startColorChange();
setClickCounter();
function startColorChange() {
interval = setInterval(function() {
shape1.classList.add("active");
setTimeout(function() {
shape1.classList.remove("active");
}, 800);
}, 3600);
}
function setClickCounter() {
let count = 0;
let span = document.getElementById('game__time');
span.textContent = count;
document.addEventListener('click', function(e) {
let shape = e.target.closest("#shape-1");
if (!shape) return;
if (shape.classList.contains("active")) {
span.textContent = ++count;
} else {
console.log("Промах!");
setTimeout(e => console.clear(), 1000);
}
});
}
}
.box {
width: 50px;
height: 50px;
background-color: orange;
margin: 4px;
}
.box.active {
background-color: red;
}
.box.active:active {
background-color: #a00;
}
<span id="game__time"></span>
<hr>
<div class="box" id="shape-1"></div>
.onload
- свойство объекта window, и оно одновременно может хранить только одну функцию. Ваша вторая функция перебивает первую (которая в итоге не выполняется). Если правда необходима загрузка всего, можно завернуть весь код в window.addEventListener("load", function() { /*...*/ })
, но это событие включает и загрузку всех внешних скриптов, картинок и прочего. В большинстве случаев достаточно и загрузки HTML, событие DOMContentLoaded
.