用于更改Div的JavaScript if语句

我希望通过javascript中的IF语句获得帮助。现在的情况是，当点击按钮时，它的颜色不会改变

这就是我想做的。单击“下一步”按钮时，应发生以下情况

如果light div的背景色为#ff0000（红色），则应更改为#ffff00（琥珀色）

如果light div的背景色为#ffff00（琥珀色），则应更改为#00ff00（绿色）

如果light div的背景色为#00ff00（绿色），则应更改为#ff0000（红色）

HTML:

JavaScipt：

function setBgColour(){

    if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    }

    else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    }

    else

    document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';

}

window.onload = function(){

    document.getElementById('next').addEventListener('click', setBgColour);

};

---

您的javascript代码应该如下所示：-

function setBgColour() {

    if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ff0000') {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    } else if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ffff00') {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    } else {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';
    }

    window.onload = function () {
        document.getElementById('next').addEventListener('click', setBgColour);
    };
}

---

i、 e.如果您需要使用

=

，而不是

=

，它是赋值运算符。

您可以将其简化很多：

var lightnumber=0；//此变量保存交通灯的当前状态
var灯=[
“ff0000”、“ffff00”、“00ff00”
]; // 此变量保存所有可能的灯光。
setBgColour=函数（）{
//首先我们决定下一个颜色，所以我们增加了颜色
//光数乘以1，除非，如果我们已经是绿色，那么我们从0开始
lightnumber=lightnumber==（lights.length-1）？0:lightnumber+1；
//这里我们根据lightnumber变量设置灯光
document.getElementsByClassName（“light”）[0].style.backgroundColor=lights[lightnumber]；
}

.light{
背景色：#ff0000；
宽度：100px；
高度：20px；
左边距：自动；
右边距：自动；
}

交通灯


下一个

您应该在

if

语句中使用

=

。此外，您实际上不需要所有这些语句—例如，将颜色放置在数组中……根据浏览器的不同，在以设置的相同格式读取颜色值时，可能无法返回颜色值。将

document.getElementsByClassName（“light”）[0].style.backgroundColor

的值记录到控制台以查看它实际包含的内容。为什么要编写

而不是

？你从哪里得到的？是的，我知道你在那里做了什么，但是改变了我的代码。当选择“下一步”按钮时，它仍然不想更改“灯光”？在html for onclick中，您编写了

setBgColour

，而它应该是

setBgColour（）

，因为它是一个函数。这似乎起作用了，我能请您解释一下setBgColour函数吗？这样我就可以更好地理解这段代码了？我添加了一些注释。如果您想知道问号操作符是如何工作的，请查看以下内容：

function setBgColour(){

    if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    }

    else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    }

    else

    document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';

}

window.onload = function(){

    document.getElementById('next').addEventListener('click', setBgColour);

};

function setBgColour() {

    if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ff0000') {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    } else if (document.getElementsByClassName("light")[0].style.backgroundColor == '#ffff00') {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    } else {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';
    }

    window.onload = function () {
        document.getElementById('next').addEventListener('click', setBgColour);
    };
}