如何用JS函数多次更改HTML按钮的文本颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (246)

我在写一个函数,在第一次单击时将按钮的文本颜色变为红色,第二次单击时将变为绿色,在第三次单击时将更改为黑色(等等)。使用一个if else检查按钮颜色然后更改它的语句来完成。现在第一次可以改变颜色,但在下次点击没有任何效果。我有一系列onclick = "changeColor(this)和调用的按钮:

   function changeColor(alphaButton) {
        if (alphaButton.style.color == "black") {
            alphaButton.style.color = "red"; 
        } else if (alphaButton.style.color == "red") {
            alphaButton.style.color = "green"; 
        } else if (alphaButton.style.color == "green") {
            alphaButton.style.color = "black"; 
        }
    }

if语句工作正常,但我不知道为什么它的工作不是过去那种。但我不知为何只改一次颜色。

好吧,我想出来了。似乎我没有正确地设置我的文本颜色(虽然我认为我有正确的设置内联)。现在可以了。尽管如此,我还是假设黑色文本会自动读作黑色文本,而不会被指定为黑色文本。

提问于
用户回答回答于

ifelse条件下,需要将颜色样式和颜色字符串与===运算符进行比较

。你用的是=,这是一个赋值运算符。

用户回答回答于

在if语句中分配变量。改为:

function changeColor(alphaButton) {
    if (alphaButton.style.color == "black") {
        alphaButton.style.color = "red"; 
    } else if (alphaButton.style.color == "red") {
        alphaButton.style.color = "green"; 
    } else if (alphaButton.style.color == "green") {
        alphaButton.style.color = "black"; 
    }
}

扫码关注云+社区

领取腾讯云代金券