使用JS函数多次更改HTML按钮文本颜色
使用JS函数多次更改HTML按钮文本颜色
提问于 2018-06-08 07:52:54
我正在尝试编写一个函数，在第一次单击时将按钮的文本颜色更改为红色，第二次单击时更改为绿色，第三次单击时更改为黑色(以此类推)。我的想法是，通过一条if else语句来检查按钮的颜色，然后更改它，就可以相当简单地实现这一点。我已经让颜色在第一次点击时变得很好，但我似乎不能在下一次点击时得到任何结果。到目前为止，我有一系列包含onclick = "changeColor(this)和call的按钮：
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语句工作得很好，但我不确定为什么它在此之后不能工作。任何帮助都将不胜感激！
更新
好了，解决了这个问题。似乎我没有正确地设置我的文本颜色(尽管我认为我已经正确地设置了内联)。现在一切都运行得很完美了。尽管如此，我仍然假设黑色文本会自动读取为黑色文本，而不会被指定为黑色文本。这绝对是一种既令人沮丧又耗时的方式来了解事实并非如此。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-08 08:26:26
一般情况下，建议不要依赖回读样式属性。除了按钮的初始style.color将是空白的事实，除非手动设置，颜色可能已经设置为#000，这具有相同的效果，但会破坏您的代码。
我是这样做的：
const colors = ["black", "red", "orange", "green", "blue"];
function changeColor(button) {
var current = Number(button.dataset.ci || 0); // init to 0 on first click
current = (current + 1) % colors.length; // clamp array index
button.dataset.ci = current; // store new value in element
button.style.color = colors[current]; // set color
}<button onclick="changeColor(this)">Click</button>
Stack Overflow用户
发布于 2018-06-08 07:56:21
在if else条件中，您需要使用===运算符比较颜色样式和颜色字符串。您使用的是=，它是一个赋值操作符。
Stack Overflow用户
发布于 2018-06-08 07:57:57
您在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";
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751609
复制相关文章
相似问题