如何在给定条件下更改按钮背景

Question

我试图用 JS 构建一个非常基本的计数器。当计数器为 0 时，我希望“减少”按钮被禁用并变为灰色，因此它不能继续为负数。

按钮的默认背景颜色已经是灰色，点击“增加”按钮后，它会立即变成珊瑚色。问题是，当您将数字减少到 0 时，它不会变成灰色，直到您在按钮已经为 0 时再次单击该按钮（因此，如果您没有点击两次，从技术上讲它永远不会变成灰色).

我知道问题是颜色变化在click事件内部，但是我不知道如何让它在增加和减少数字后一到0就变成灰色。

我尽量不为此使用 JQuery 或 React，所以我想知道是否有 vanilla 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 susNumber() {
    count -= 1;
    number.innerText = count;
    if (count === 0) {
        susBtn.disabled = true;
        susBtn.style.backgroundColor = "grey";
    }
}

如何在给定条件下更改按钮背景

How to change button background on given condition

html

javascript

css

dom-events