Вообщем есть счётчик, который увеличивается по клику. Когда он достигает определенного значения - меняется цвет фона. (Изменение фона задано через функцию). Таких значений много, а фон больше одного раза не меняется. Похоже что они конфликтуют.
let result = 1;
function hit() {
if (result >= 0) {
result = result + 1;
document.getElementById("result").innerHTML = result;
}
if (result === 3) {
r1();
};
if (result === 4) {
r2();
};
if (result === 5) {
r3();
};
}
// Смена монстра
function r1() {
const div1 = document.querySelector('.monster1');
div1.className = 'monster2';
}
function r2() {
const div2 = document.querySelector('.monster2');
div2.className = 'monster3';
}
function r3() {
const div3 = document.querySelector('.monster3');
div3.className = 'monster4';
}
.arena {
width: 400px;
height: 400px;
background-color: lightgreen;
}
.monster1 {
height: 280px;
width: 295px;
background-color: red;
}
.monster2 {
height: 280px;
width: 295px;
background-color: blue;
}
.monster3 {
height: 280px;
width: 295px;
background-color: green;
}
.monster4{
height: 280px;
width: 295px;
background-color: yellow;
}
.counter1 {
position: absolute;
left: 30px;
bottom: 380px;
width: 200px;
}
<div class="arena">
<div onclick="calc()" class="counter1">
<p class="big" id="result">1</p>
Счетчик
<a onclick="hit()" href="#" class="navigatsiya" class="red">Простой Удар </a>
<div class="monster1">
</div>
</div>