javascript - 如果盒子是特定颜色，我该如何更改它的颜色？

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>