使用JS功能多次更改HTML按鈕文本的顏色

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語句可以正常工作，但是我不確定為什么它不能正常工作。 任何幫助將不勝感激！

[更新]

好吧，想通了這一點。 看來我沒有正確設置文本顏色（盡管我認為我已經正確設置了行內顏色）。 現在一切正常。 盡管如此，我仍然假設黑色文本會自動讀取為黑色文本，而無需指定為黑色文本。 絕對不是一種令人沮喪且耗時的方法，這是事實。

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"; 
    }
}