Javascript 使用JS函数多次更改HTML按钮文本颜色

我正在尝试编写一个函数，第一次单击时将按钮的文本颜色更改为红色，第二次单击时变为绿色，第三次单击时变回黑色（依此类推）。我的想法是，通过检查按钮颜色然后更改按钮的

if-else

语句，这应该非常简单。我在第一次点击时就可以改变颜色，但在下一次点击时似乎无法得到任何结果。到目前为止，我有一系列按钮，其中包含

onclick=“changeColor（this）

，并调用：

功能更改颜色（字母按钮）{
如果（alphaButton.style.color==“黑色”）{
alphaButton.style.color=“红色”；
}else if（alphaButton.style.color==“红色”）{
alphaButton.style.color=“绿色”；
}else if（alphaButton.style.color==“绿色”）{
alphaButton.style.color=“黑色”；
}
}

if

语句工作正常，但我不确定为什么它在这之后不起作用。任何帮助都将不胜感激

[更新]

---

好的，我已经解决了这个问题。看起来我没有正确设置文本颜色（尽管我认为我已经正确设置了内联颜色）.现在，所有功能都完美无瑕。尽管如此，我还是会假设黑色文本会自动读取为黑色文本，而不会被指定为黑色文本。了解情况并非如此肯定是一种令人沮丧且耗时的方式。

在

if

else

条件中，您需要比较颜色样式和颜色字符串使用

==

运算符。您使用的是赋值运算符

=

。

在

if

条件中，您需要将颜色样式和颜色字符串与

=

运算符进行比较。您使用的是赋值运算符

=

。

您正在赋值变量在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"; 
    }
}

---

您正在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"; 
    }
}

---

通常建议不要依赖于读回样式属性。除了按钮的初始

样式.color

将为空，除非手动设置，否则该颜色可能已设置为

#000

，这具有相同的效果，但会破坏您的代码

我是这样做的：

const colors=[“黑色”、“红色”、“橙色”、“绿色”、“蓝色”]；
功能更改颜色（按钮）{
var current=Number（button.dataset.ci | | 0）；//第一次单击时初始化为0
当前=（当前+1）%colors.length；//钳制数组索引
button.dataset.ci=current；//在元素中存储新值
button.style.color=颜色[当前]；//设置颜色
}

---

单击

通常建议不要依赖回读样式属性。除了按钮的初始

样式.color

将为空，除非手动设置，否则该颜色可能已设置为

\000

，这具有相同的效果，但会破坏您的代码

我是这样做的：

const colors=[“黑色”、“红色”、“橙色”、“绿色”、“蓝色”]；
功能更改颜色（按钮）{
var current=Number（button.dataset.ci | | 0）；//第一次单击时初始化为0
当前=（当前+1）%colors.length；//钳制数组索引
button.dataset.ci=current；//在元素中存储新值
button.style.color=颜色[当前]；//设置颜色
}

---

---

Click

=

是赋值…您想在测试中使用

=

可能会感兴趣：。这完全有道理，但是用==替换=会破坏第一次单击的平衡。我猜我以为我正在做的检查根本没有发生，我只是将按钮指定为黑色？不太确定这里发生了什么…是按钮吗n在元素的

style

属性中或通过样式表设置的第一个颜色-可能相关：它在元素上内联。

=

是赋值…您想在测试中使用

=

可能会感兴趣：。这完全有道理，但将=替换为==甚至会破坏第一次单击。我猜我以为我正在进行的检查是sn根本没有发生，我只是将按钮指定为黑色？不太清楚这里发生了什么…按钮的第一种颜色是在元素的

样式中设置的还是通过样式表设置的？–可能相关：它在元素上内联。这是我早上3点的错误。不过，这似乎不起作用。我是g使用我以为我正在做的支票实际上不起作用。这是我早上3点就犯的错误。不过，这似乎不起作用。我猜我以为我正在做的支票实际上不起作用。这是我早上3点就犯的错误。但是，这似乎不起作用。我猜我以为我在做的支票g实际上不起作用。这完全是我早上3点的错误。不过，这似乎不起作用。我猜我以为我正在做的检查实际上不起作用。肯定是一个更好的解决方案，谢谢你的帮助！该死，快告诉我吧。我只是添加一些代码注释来扩展你为那些不熟悉的人所做的工作h数据属性，使用| |切换为null，使用模运算符保持在界限内（这是我以前从未见过的）没有理由这只适用于三种颜色，对吗？当我添加更多颜色时，它会破坏它，我想我在这里遗漏了一些东西，因为我不明白为什么会这样。@ItaiYasur显然所有数据集成员都是字符串，修复了代码。肯定是一个更好的解决方案，谢谢你的帮助！该死的，快告诉我吧。我只是广告而已d一些代码注释来扩展您为那些不熟悉数据属性的人所做的工作，您使用| |来打开null，您使用模运算符来保持边界（这是我以前从未见过的）没有理由这只适用于三种颜色，对吗？当我添加更多颜色时，它会破坏它，我想我在这里错过了一些东西，因为我