Javascript 当你点击另一个东西时，翻转它的颜色

在第一行手动将变量从true更改为false会将圆的颜色从橙色翻转为蓝色，但点击角上的框意味着在它们之间翻转，但不起作用。感觉这里有什么基本的我做错了吗？

---

虽然，在事件处理程序中移动代码以改变颜色是可行的，但我建议使用API

创建一个CSS类，将背景颜色设置为蓝色，并在单击框时切换该类

classList.toggle（'className'）

将添加尚未添加到元素上的类，否则将删除该类

document.getElementById（“框”）.addEventListener（“单击”，函数）（）{
document.getElementById（'circle'）.classList.toggle（'blue'）；
});
#框{
宽度：50px；
高度：50px；
位置：绝对位置；
底部：0；
右：0；
背景色：红色；
}
#圈{
宽度：50px；
高度：50px；
背景：橙色；
边界半径：50px；
位置：绝对位置；
最高：50%；
左：50%；
}
#蓝色圆圈{
背景：蓝色；
}
您实际上可以检查颜色并去掉全局变量：

var flip = function() {
  var baseColor = "orange";
  var currcolor = document.getElementById("circle").style.backgroundColor;
  document.getElementById("circle").style.backgroundColor = (currcolor == baseColor) ? "blue" : baseColor;
}
document.getElementById("box").addEventListener("click", flip);

您的函数将更改orangemode并退出。if语句不再执行，但IE中当前不支持类列表切换方法@是的，对于那些不支持
classList
的版本，您可以使用
var orangeMode = true

flip = function() {
  orangeMode = !orangeMode;
  if (orangeMode) { 
  document.getElementById("circle").style.backgroundColor = "orange";
  } else {
    document.getElementById("circle").style.backgroundColor = "blue";
  }
}
document.getElementById("box").addEventListener("click", flip);

var flip = function() {
  var baseColor = "orange";
  var currcolor = document.getElementById("circle").style.backgroundColor;
  document.getElementById("circle").style.backgroundColor = (currcolor == baseColor) ? "blue" : baseColor;
}
document.getElementById("box").addEventListener("click", flip);