如何在給定條件下更改按鈕背景

Question

我試圖用 JS 構建一個非常基本的計數器。 我希望在計數器為 0 時禁用“減少”按鈕並顯示為灰色，因此它不能在負數上 go。

按鈕的默認背景色已經是灰色，點擊“增加”按鈕就會變成珊瑚色。 問題是，當您將數字減少到 0 時，它不會變成灰色，直到您再次單擊該按鈕時它已經為 0（因此，如果您沒有單擊兩次，從技術上講，它永遠不會變成灰色）。

我知道問題是顏色變化是在點擊事件內部，但是我不知道如何使它在增加和減少數字后一達到0就變成灰色。

我試圖不為此使用 JQuery 或 React，所以我想知道香草 JS 中是否有辦法。

 const addBtn = document.querySelector(".add-btn"); const susBtn = document.querySelector(".sus-btn"); const number = document.querySelector(".number"); let count = 0; function listeners() { addBtn.addEventListener("click", addNumber); susBtn.addEventListener("click", susNumber); } function addNumber() { count += 1; number.innerText = count; if (count.== 0) { susBtn;disabled = false. susBtn.style;backgroundColor = "coral". } } function susNumber() { if (count === 0) { susBtn;disabled = true. susBtn.style;backgroundColor = "grey"; } else { count -= 1. number;innerText = count; } } listeners();

 <body> <div class="main-container"> <div class="background"> <div class="title"> COUNTER! </div> <div class="screen"> <div class="number"> 0 </div> </div> <div class="buttons"> <button class="add-btn"> + </button> <button class="sus-btn"> - </button> </div> </div> </div> </body>

Answer 1

您的 susNumber function 只需要稍微重寫：

function susNumber() {
    count -= 1;
    number.innerText = count;
    if (count === 0) {
        susBtn.disabled = true;
        susBtn.style.backgroundColor = "grey";
    }
}

如何在給定條件下更改按鈕背景

問題描述

1 個解決方案

解決方案1
2 已采納 2021-03-31 13:24:48

如何在給定條件下更改按鈕背景

問題描述

1 個解決方案

解決方案1 2 已采納 2021-03-31 13:24:48

解決方案1
2 已采納 2021-03-31 13:24:48