Javascript 单击可前后更改div的颜色

我正在做一个家庭作业，在点击时来回改变这个div的颜色

<div id = "color-block">
    <p id="center-text">The color is: <span id = "color-name">#F08080</span> </p>
</div>

我不确定是什么导致else语句不起作用。有人能给我指出正确的方向吗？

由于某种原因（我不知道为什么）十六进制颜色（例如#ff0000）转换为RGB颜色（例如RGB（255,0,0））。因此，只使用RGB颜色更容易。你的if中也有一个错误。您必须使用==进行比较。您的代码最终是这样的：

document.getElementById("color-block").onclick = function () {
  changeColor();
};
function changeColor() {
  if (
    (document.getElementById("color-block").style.backgroundColor == "rgb(240, 128, 128)")
  ) {
    document.getElementById("color-block").style.backgroundColor = "rgb(0, 128, 128)";
  } else {
    document.getElementById("color-block").style.backgroundColor = "rgb(240, 128, 128)";
  }
}

---

演示：

=

是赋值运算符。要进行比较，请使用

==

（相等）或

===

（标识）。下面是如何构建以下最佳实践的示例代码：（例如，此代码允许您在脚本顶部再添加一种颜色，其余颜色就可以了）

document.getElementById("color-block").onclick = function () {
  changeColor();
};
function changeColor() {
  if (
    (document.getElementById("color-block").style.backgroundColor == "rgb(240, 128, 128)")
  ) {
    document.getElementById("color-block").style.backgroundColor = "rgb(0, 128, 128)";
  } else {
    document.getElementById("color-block").style.backgroundColor = "rgb(240, 128, 128)";
  }
}