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

【问题标题】：How to change button background on given condition如何在给定条件下更改按钮背景
【发布时间】：2021-06-27 12:26:08
【问题描述】：

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

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

我知道问题是颜色变化是在点击事件里面，但是不知道怎么让它在增减数字后一到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>

【问题讨论】：

这能回答你的问题吗？ Changing a button's background color when it's clicked

标签： javascript html css dom-events

【解决方案1】：

您的 susNumber 函数只需要稍微重写一下：

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

【讨论】：

非常感谢！！很明显，现在我看到了，哈哈。谢谢！！