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

Question

I was trying to build a really basic counter with JS.我试图用 JS 构建一个非常基本的计数器。 I wanted the "decrease" button to be disabled and gray-colored when the counter was on 0, so it can't go on negative numbers.我希望在计数器为 0 时禁用“减少”按钮并显示为灰色，因此它不能在负数上 go。

The default background color of the button is already gray, and it turns coral as soon as you click on the "increase" button.按钮的默认背景色已经是灰色，点击“增加”按钮就会变成珊瑚色。 The problem is, when you decrease the number to 0, it doesn't turn gray until you click the button once again when it is already on 0 (so, if you didn't click twice, technically it wouldn't turn gray ever).问题是，当您将数字减少到 0 时，它不会变成灰色，直到您再次单击该按钮时它已经为 0（因此，如果您没有单击两次，从技术上讲，它永远不会变成灰色）。

I know that the problem is that the color change is inside the click event, but I don't know how to make it turn gray as soon as it reaches 0 after increasing and decreasing the number.我知道问题是颜色变化是在点击事件内部，但是我不知道如何使它在增加和减少数字后一达到0就变成灰色。

I'm trying not to use JQuery or React for this, so I was wondering if there was a way in vanilla JS.我试图不为此使用 JQuery 或 React，所以我想知道香草 JS 中是否有办法。

This is the CodePen for the project.这是该项目的 CodePen。

 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

Your susNumber function just needs a little re-write:您的 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