Как изменить цвет коробки, если он был на указанном c цвете?

Question

Я новичок в JavaScript и сейчас пробую кое-что. В любом случае, я делаю простую коробку, которая меняет цвет onclick кнопки. Ответить так просто, но я просто не могу понять. Вот HTML пока:

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
  if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
}

#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}

<div id="box"></div>
<button id="btn" onclick="changeColor(); ifColor();">
    Change box color
</button>

Когда я нажимаю кнопку, она становится только синей, а когда я нажимаю ее снова, ничего не происходит. если я уберу функцию ifColor, кнопка заставит окно только покраснеть.

Answer 1

Просто используйте одну функцию, которая переключает цвет.

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  if (box.style.backgroundColor == "blue") {
    box.style.backgroundColor = "red";
  } else {
    box.style.backgroundColor = "blue";
  }
}

#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}

<div id="box"></div>
<button id="btn" onclick="changeColor();">
    Change box color
</button>

Answer 2

Вы также можете сделать следующее:

var box = document.getElementById("box");

function changeColor() {
  if (box.classList.contains('red')) {
    box.classList.remove('red');
    box.classList.add('blue');
  } else {
    box.classList.remove('blue');
    box.classList.add('red');
  }
}

#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div id="box" class="red"></div>
<button id="btn" onclick="changeColor();">
    Change box color
</button>

Answer 3

Вы пытаетесь сделать так, чтобы при нажатии на кнопку она меняла цвет с красного на синий?

При настройке кода он всегда будет синим, потому что:

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
  if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
}

Сначала вы вызываете changeColor (); который превращает кнопку в красный, затем вы запускаете ifColor (), который меняет кнопку на синий. Это происходит практически мгновенно.

Вам просто нужно сделать это:

function changeColor() {
  if(box.style.backgroundColor === "red"){
      box.style.backgroundColor = "blue";
  } 
  else box.style.backgroundColor = "red";
}

Answer 4

Ваш код работает, просто установите задержку в несколько секунд, чтобы просмотреть его изменение.

var btn = document.getElementById("btn");
var box = document.getElementById("box");

function changeColor() {
  box.style.backgroundColor = "red";
}

function ifColor() {
setTimeout(()=>{
 if (box.style.backgroundColor == "red") {
    box.style.backgroundColor = "blue";
  }
},2000);
 
}

#box {
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 0.5px;
}

<div id="box"></div>
<button id="btn" onclick="changeColor(); ifColor();">
    Change box color
</button>