1

Вообщем есть счётчик, который увеличивается по клику. Когда он достигает определенного значения - меняется цвет фона. (Изменение фона задано через функцию). Таких значений много, а фон больше одного раза не меняется. Похоже что они конфликтуют.

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>

2 ответа 2

0

let result = 1;

function calc() {}

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: 200px;
  background-color: lightgreen;
}

.monster1 {
  height: 80px;
  width: 295px;
  background-color: red;
}

.monster2 {
  height: 80px;
  width: 295px;
  background-color: blue;
}

.monster3 {
  height: 80px;
  width: 295px;
  background-color: green;
}

.monster4 {
  height: 80px;
  width: 295px;
  background-color: yellow;
}

.counter1 {
  position: absolute;
  left: 30px;
  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>
</div>

0

let result = 1;

function calc() {}

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;
  margin-top: 40px;
}

.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>      
  <div class="monster1"></div>
  
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.