第二次單擊時如何更改元素顏色？

Question

我正在為我正在制作的網站制作一個類似的按鈕，我有一個簡單的 JavaScript 可以在單擊時將顏色更改為紅色，但是我怎樣才能使顏色交替，所以如果你再次單擊它它會去如果您再次單擊它等，則返回黑色而不是再次變為紅色。

 const btn = document.getElementById("like"); btn.addEventListener('click', function onClick() { btn.style.color = 'crimson'; });

Answer 1

使用classList的toggle方法。

而且，作為一般規則，您應該努力避免設置“內聯樣式”（ element.style.xxx = xxx ），因為這會為元素創建一個只能被另一個內聯樣式覆蓋的樣式，從而導致代碼重復，因此無法很好地擴展代碼。 相反，請始終嘗試使用 CSS 類。

 document.getElementById("like").addEventListener('click', function() { this.classList.toggle("active"); });

 .active { color:crimson; }

 <button id="like">Like</button>

Answer 2

你可以按照這個步驟

首先讓我們取一個計數器變量

let clickCount = 0;

然后添加點擊事件。野兔是你的代碼：

 const btn = document.getElementById("like"); let clickCount = 0; btn.addEventListener("click", () => { clickCount++; if (clickCount > 1) { btn.style.color = "red"; } });

 <button id="like">Like</button>