JavaScript onClick重置和/或不同的结果

我是JavaScript新手，今天一直在解决这个问题

我有一个按钮和两个矩形，一个红色一个蓝色。一旦我点击按钮开关的位置（更像颜色），我想弄清楚的是，第二次点击会恢复到原来的状态，这两个矩形。到目前为止，它只有一种工作方式

任何回复都将不胜感激

函数changeColorOfElementID（id，color）{
document.getElementById（id）.style.backgroundColor=color；
}

#一个矩形{
位置：绝对位置；
宽度：100px；
高度：100px；
左：100px；
顶部：100px；
背景颜色：蓝色；
z指数：1；
}
#A矩形2{
位置：绝对位置；
宽度：100px；
高度：100px；
左：110像素；
顶部：110px；
背景色：红色；
z指数：1；
}

颜色开关
变色

您可以执行以下操作：

function changeColorOfElementID(id){

    if(document.getElementById(id).style.backgroundColor == 'red')
        document.getElementById(id).style.backgroundColor = 'blue';

    else
        document.getElementById(id).style.backgroundColor = 'red'
}

HTML

<button onClick="changeColorOfElementID('aRectangle'); changeColorOfElementID('aRectangle2'); " >Change Color</button>

改变颜色

您可以创建这样的函数

function toggleElementColor(id1,id2){
  var element1 = document.getElementById(id1);
  var element2 = document.getElementById(id2);

  var element1Color = element1.style.backgroundColor;
  var element2Color = element2.style.backgroundColor;

  element1.style.backgroundColor = element2Color;
  element2.style.backgroundColor = element1Color;
}

<button onClick="toggleElementColor('aRectangle','aRectangle2');" >Change Color</button>

你喜欢这个吗

function toggleElementColor(id1,id2){
  var element1 = document.getElementById(id1);
  var element2 = document.getElementById(id2);

  var element1Color = element1.style.backgroundColor;
  var element2Color = element2.style.backgroundColor;

  element1.style.backgroundColor = element2Color;
  element2.style.backgroundColor = element1Color;
}

<button onClick="toggleElementColor('aRectangle','aRectangle2');" >Change Color</button>

改变颜色

谢谢大家真的帮助了我

这是从收到的所有帮助中得出的解决方案：

函数更改元素的颜色1（id）{
if（document.getElementById（id）.style.backgroundColor=='red'）
document.getElementById（id）.style.backgroundColor='blue'；
其他的
document.getElementById（id）.style.backgroundColor='red'
}
函数ChangeColorOfElementD2（id）{
if（document.getElementById（id）.style.backgroundColor=='blue'）
document.getElementById（id）.style.backgroundColor='red'；
其他的
document.getElementById（id）.style.backgroundColor='blue'
}

#一个矩形{
位置：绝对位置；
宽度：100px；
高度：100px；
左：100px；
顶部：100px；
背景颜色：蓝色；
z指数：1；
}
#A矩形2{
位置：绝对位置；
宽度：100px；
高度：100px；
左：110像素；
顶部：110px；
背景色：红色；
z指数：1；
}

颜色开关
变色

它只在途中起作用，因为这是你告诉他的。你说：当有人点击时，把这个换成红色，另一个换成蓝色。因此，当用户单击时，它会改变颜色，但当他再次单击时，他会尝试将红色变为红色，将蓝色变为蓝色。我很感激您的回答，它接近所需的颜色！唯一不同的是我做了两个功能，一个是ChangeColorOfElement1，另一个是ChangeColorOfElement2。在按钮中，我将“a矩形”与第一个按钮关联，将“a矩形”与第二个按钮关联，并调整颜色模式。非常感谢你！