如何重置后重新启用按钮？（JavaScript逻辑问题排查）

问题说明 #

开发了一款包含配对团队的程序，功能逻辑如下：

• 点击团队按钮，该团队胜场数（Wins）+1，其配对团队败场数（Losses）+1
• 败场数达到2次的团队，按钮会被禁用，文本变为Eliminated
• 设置了重置按钮，本意是清空所有计数器并重新启用禁用的按钮，但实际仅文本恢复为团队名称，按钮仍保持禁用状态

解决方案 #

问题核心在于updateButtonTexts函数的逻辑缺失：该函数仅处理了败场数等于2时禁用按钮的逻辑，但未处理败场数小于2时重新启用按钮的逻辑。重置后团队败场数回到0，但按钮的disabled属性未被重置为false，导致按钮保持禁用。

只需修改updateButtonTexts函数，添加对应分支判断，确保败场数不足2时按钮恢复启用状态：

修改后的关键函数代码 #

// Function to update button texts
function updateButtonTexts() {
  groups.forEach((group, index) => {
    const button = document.getElementById(`button${index + 1}`);
    if (button) {
      if (group.losses === 2) {
        button.textContent = 'Eliminated';
        button.disabled = true;
      } else {
        // 败场数不足2时，恢复按钮可用状态与正常文本
        button.textContent = `${group.name} - Wins: ${group.wins} - Losses: ${group.losses}`;
        button.disabled = false;
      }
    }
  });
}

逻辑说明 #

调整后的函数通过分支判断覆盖两种状态：

• 当group.losses === 2：设置按钮文本为Eliminated并禁用
• 其他情况：显示团队名称+胜负场数，同时强制启用按钮

重置函数resetCounters将所有团队的wins和losses重置为0后，调用updateButtonTexts时，所有团队会进入else分支，自动恢复按钮的启用状态与正常文本显示。

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