JavaScript实现计数器按钮禁用功能时点击increase无法恢复decrease可用的问题

问题根因 #

• increase点击事件仅修改了计数和状态标记，没有同步修改decrease按钮的禁用属性，所以按钮被禁用后无法自动恢复可用状态
• decrease点击事件中存在语法隐患：if(invalid = false)是赋值操作而非等值判断，实际该条件永远不成立
• reset、save等会修改计数的事件逻辑中，均没有同步更新decrease按钮的禁用状态，状态无法和计数匹配

修复后完整代码 #

let countEl = document.getElementById('count')
let decreaseEl = document.getElementById('decrease')
let resetEl = document.getElementById('reset')
let increaseEl = document.getElementById('increase')
let saveEl = document.getElementById("save")
let savedEl = document.getElementById('savedCount')
let message = "Invalid Value";

let countNo = 0;

// 抽离公共状态更新逻辑，统一管理按钮禁用状态
function updateDecreaseBtnState() {
  decreaseEl.disabled = countNo <= 0;
}

decreaseEl.addEventListener('click', function(){
    countNo--;
    if(countNo < 0){
        countEl.textContent = message;
    }else{
        countEl.textContent = countNo;
    }
    updateDecreaseBtnState()
})
resetEl.addEventListener('click', function(){
    countNo = 0;
    countEl.textContent = 0;
    savedEl.textContent = "Counts:";
    updateDecreaseBtnState()
})
increaseEl.addEventListener('click',function(){
    countNo++;
    countEl.textContent = countNo;
    updateDecreaseBtnState()
})
saveEl.addEventListener('click',function(){
    if(countNo >= 0){
        savedEl.textContent += " " + countNo + "-";
        countNo = 0;
        countEl.textContent = 0;
        updateDecreaseBtnState()
    }
})

核心修改说明 #

1. 抽离了decrease按钮状态更新逻辑为公共函数，避免各事件中重复写判断逻辑，降低维护成本
2. 去掉了冗余的invalid状态变量，直接通过当前计数countNo的值判断按钮状态，逻辑更直观不易出错
3. 所有会修改计数的事件（增减、重置、保存）执行后，都同步调用状态更新函数，保证按钮状态和当前计数完全匹配

内容的提问来源于stack exchange，提问作者user16915455