Javascript-根据当前颜色更改div的颜色

我正试图改变一个div的背景颜色基于它的当前颜色，通过点击一个按钮

例如，如果颜色是青色（#00ffff-它应该变为黄色（'ffff00）

如果颜色为黄色，则应改为洋红（#ff00ff）

如果颜色为洋红色，则应恢复为青色

我已经成功地将颜色从青色更改为黄色，但是我不确定如何准确地编写if语句（假设if语句是最好的方式？）来根据当前颜色更改颜色

function ColorFunction（）{
if（light.getItem（“backgroundColor”）='#00ffff'）{
document.getElementById（“light”）.style.backgroundColor=“#ffff00”；
}
其他的
if（light.getItem（“backgroundColor”）=='#ffff00'）{
document.getElementById（“light”）.style.backgroundColor=“#ff00ff”；
}
其他的
if（light.getItem（“backgroundColor”）='#ff00ff'）{
document.getElementById（“light”）.style.backgroundColor=“00ffff”；
}
}

.main{
宽度：250px；
颜色：#202020；
背景色：#D0；
}
.光{
宽度：50px；
高度：50px；
背景色：#00ffff
}
#烧{
宽度：150px；
字体：斜体；
}
#钮扣{
字体风格：粗体；
宽度：150px；
}

Disco地狱
div
烧掉！

好的，让我们从这里开始

您有一个id为

light

的元素，但它不会自动成为您可以在javascript中使用的变量。很容易将其变成一个变量：

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

然后，我甚至不确定你从哪里得到

getItem

——也许这是一个猜测——但这不是一个有效的方法

您可以使用

light.style.backgroundColor

来实现这一点-请参阅下面的代码片段

var colors=[“rgb（0，255，255）”，“rgb（255，255，0）”，“rgb（255，0，255）”；
函数ColorFunction（）{
var light=document.getElementById（“light”）；
var curr=light.style.backgroundColor；
var next=colors.indexOf（curr）+1；
light.style.backgroundColor=颜色[下一个%colors.length]；
}

Disco地狱
燃烧，宝贝燃烧！
刻录！

在直接为div指定颜色后，可以使用对象来移动颜色。

function ColorFunction（）{
变量颜色={
'rgb（0，255，255）''rgb（255，255，0）'，
'rgb（255，255，0）''rgb（255，0，255）'，
'rgb（255,0255）''rgb（0255255）'
},
元素=document.getElementById（“light”）；
element.style.backgroundColor=颜色[element.style.backgroundColor]；
}

.main{宽度：250px；颜色：#202020；背景色：#d0d0；}
.light{宽度：50px；高度：50px；背景色：#00ffff；}
#刻录{宽度：150px；字体样式：斜体；}
#按钮{字体样式：粗体；宽度：150px；}

烧录！

没有任何getItem（）是虚构的方法。查看控制台，您会发现这是一个错误。要读取背景色，您应该使用样式

var color = elementReference.style.backgroundColor

现在，您依赖的是JavaScript的一个糟糕特性，即定义一个与元素id匹配的变量，它神奇地成为对该元素的引用。您不应该这样做。您应该自己定义该变量

var elementReference = document.getElementById("light");

现在，当你读取颜色值时，浏览器返回不同的东西。一些十六进制，一些rgb。所以检查颜色是一件不好的事情。怎么做？使用CSS类

function ColorFunction（）{
var elem=document.getElementById（“light”）；
if（elem.classList.contains（“红色”））{
元素类列表。删除（“红色”）；
元素类列表。添加（“蓝色”）；
}else if（elem.classList.contains（“蓝色”））{
元素类列表。删除（“蓝色”）；
元素类列表添加（“绿色”）；
}否则{
元素类列表。删除（“绿色”）；
元素类列表添加（“红色”）；
}
}

.red{背景色：红色；}
.blue{背景色：蓝色；}
.green{背景色：绿色；}

Disco地狱
div
烧掉！

这不是它的StackOverflow；）@Jamiec所以…那将是第一个错误。我投票结束这个问题，因为它离题了；这可能（也可能不）是合适的，但一定要先查看他们的帮助。@T.J.Crowder这不是一个代码审查问题。。。这不可能适合那里。代码审查需要工作代码，这远远不能工作。该代码段将无法工作，lightvar未定义“您有一个id为light的元素，但它不会自动成为您可以在javascript中使用的变量。”实际上，它是这样做的。id为

s的元素现在获得@T.J.Crowder sshhhh。让我们不要让人们相信使用它们是个好主意。：-）我已经放弃了，因为它实际上被添加到了规范中。