Question

我正在尝试编写一个函数，在第一次单击时将按钮的文本颜色更改为红色，第二次单击时将绿色更改为红色，在第三次单击时将其更改为黑色（依此类推）。我的想法是，使用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声明工作正常，但我不确定为什么它不能解决这个问题。任何帮助将不胜感激！

[UPDATE]

好的，想出这个。看来我没有正确设置我的文字颜色（虽然我认为我已正确设置内联）。现在一切都很完美。尽管如此，我还是假设黑色文本会自动读作黑色文本，而不会被指定为黑色文本。绝对是一种令人沮丧和耗时的方式来了解情况并非如此。

Answer 1

一般建议不要依赖回读样式属性。除了手动设置按钮的初始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>

Answer 2

在if else条件下，您需要将颜色样式和颜色字符串与===运算符进行比较。您正在使用=，这是一个赋值运算符。

Answer 3

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

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

3 个答案: