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

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