Question

我正在制作一个3色按钮，当你按下它时会在红色，绿色和蓝色之间切换。我认为错误在于此

if (color.style.backgroundColor == 'ff0000';) {
            color.style.backgroundColor='00ff00';
        }
        if (color.style.backgroundColor == '00ff00';) {
            color.style.backgroundColor='0000ff';
        }
        if (color.style.backgroundColor == '0000ff';) {
            color.style.backgroundColor='ff0000';
        }

代码，但我不知道具体问题是什么。

    <html>
<head>
<title>Button</title>
<script type="text/javascript">
function buttonpress() {
    alert("Hi");
}
function colors() {
    if (color.style.backgroundColor == 'ff0000';) {
        color.style.backgroundColor='00ff00';
    }
    if (color.style.backgroundColor == '00ff00';) {
        color.style.backgroundColor='0000ff';
    }
    if (color.style.backgroundColor == '0000ff';) {
        color.style.backgroundColor='ff0000';
    }
}
</script>
</head>
<body>
<button onclick="buttonpress()">Click Me</button>
<p></p>
<button id="color" onclick="colors()">Hi</button>
<script>
color.style.backgroundColor='ff0000';
</script>
</body>
</html>

Answer 1

您缺少脚本标记

<script type="text/javascript">

另外，就像提示一样，您稍微忽略了javascript的功能，这可以极大地提高代码的灵活性。

<html>
<head>
<title>Button</title>
</head>
<body>
<button id="color1">Hi</button>
<button id="color2">Hi</button>
<button id="color3">Hi</button>
<button id="color4">Hi</button>
<button id="color5">Hi</button>
<script type="text/javascript">

function BgColorChanger(elem) {

    this.nextColor = function() {
        ++index;
        if (index == colors.length)
            index = 0;

        elem.style.backgroundColor = colors[index];
    }

    elem.onclick = function() {
        changer.nextColor();
    }

    var changer = this;
    var colors = ['ff0000', '00ff00', '0000ff'];
    var index = -1;

    this.nextColor();

}

new BgColorChanger(document.getElementById("color1"));
new BgColorChanger(document.getElementById("color2"));
new BgColorChanger(document.getElementById("color3"));
new BgColorChanger(document.getElementById("color4"));
new BgColorChanger(document.getElementById("color5"));

</script>
</body>
</html>

使用上面的代码，您现在可以在不编写更多代码的情况下更改无限元素。另外，如果你继续引用BgColorChanger实例，外部代码可以通过调用bgColorChangerInstance.nextColor（）来改变颜色;

Answer 2

您需要使用else。否则，在更改第一个if中的颜色后，它会匹配第二个if并再次更改，然后匹配第三个if并更改回第一个颜色

您的;声明中有额外的if。

当您阅读颜色样式时，它会返回rgb()格式的颜色，而不是十六进制代码（但我已经读过旧版本的IE不会这样做）。

使用十六进制代码设置样式时，您必须具有#前缀。

function colors() {
    if (color.style.backgroundColor == 'rgb(255, 0, 0)') {
        color.style.backgroundColor='#00ff00';
    }
    else if (color.style.backgroundColor == 'rgb(0, 255, 0)') {
        color.style.backgroundColor='#0000ff';
    }
    else if (color.style.backgroundColor == 'rgb(0, 0, 255)') {
        color.style.backgroundColor='#ff0000';
    }
}

另一种方法是使用switch/case：

function colors() {
    switch (color.style.backgroundColor) {
    case 'rgb(255, 0, 0)':
        color.style.backgroundColor='#00ff00';
        break;
    case 'rgb(0, 255, 0)':
        color.style.backgroundColor='#0000ff';
        break;
    case 'rgb(0, 0, 255)':
        color.style.backgroundColor='#ff0000';
    }
}

DEMO

Answer 3

几个问题

缺少开头<script>代码
不要以分号结束if语句，语法错误例如

你的代码

 if (color.style.backgroundColor == 'ff0000';) {
        color.style.backgroundColor='00ff00';
 }
 if (color.style.backgroundColor == '00ff00';) {
        color.style.backgroundColor='0000ff';
 }
 if (color.style.backgroundColor == '0000ff';) {
        color.style.backgroundColor='ff0000';
 }

应该是

if (color.style.backgroundColor == 'ff0000') {
        color.style.backgroundColor='00ff00';
    }
    if (color.style.backgroundColor == '00ff00') {
        color.style.backgroundColor='0000ff';
    }
    if (color.style.backgroundColor == '0000ff') {
        color.style.backgroundColor='ff0000';
    }

if语句不是独占的，如果第一个匹配并更改颜色，则第二个匹配并更改颜色，然后第三个将匹配并将颜色更改回开头。您需要if else语句

例如

 if (color.style.backgroundColor == 'ff0000') {
     color.style.backgroundColor='00ff00';
 } else if (color.style.backgroundColor == '00ff00') {
     color.style.backgroundColor='0000ff';
 } else if (color.style.backgroundColor == '0000ff') {
     color.style.backgroundColor='ff0000';
 }

从style.backgroundColor返回的值并不总是十六进制颜色，它可以是rgb(255,0,0)，因此您的if语句根本不匹配。您可以这样设置，但浏览器不会以相同的格式返回。我会用一个额外的变量处理它。而不是检查元素，存储和检查变量。像

（仅作为一个例子，有很多方法）

var currentColor = 'red';
function colors() {
    if (currentColor == 'red') {
        color.style.backgroundColor='00ff00';
        currentColor = 'green';
    }
    else if (currentColor == 'green') {
        color.style.backgroundColor='0000ff';
        currentColor = 'blue';
    }
    else if (currentColor == 'blue') {
        color.style.backgroundColor='ff0000';
        currentColor = 'red';
    }
}

变色按钮

3 个答案: