JS实现顺序点击按钮功能时213按钮状态异常如何修复

问题原因 #

• HTML存在重复ID属性：文本为93和213的两个按钮都用了id="dica6"，而document.getElementById()在页面存在重复ID时只会返回第一个匹配的元素，导致点击「Próxima dica」重置状态时，213按钮永远不会被选中修改透明度，始终保持点击后的0.5半透明状态，看起来就像一直被按下。
• 原JS代码重复冗余，重置逻辑只修改了透明度，没有统一恢复按钮的可点击状态，容易出现状态遗漏。

修复步骤 #

1. 修正HTML重复ID #

给213按钮分配唯一ID，补全你需要的ID序列即可，示例如下：

<div class="row">
  <button id="dica6" onclick="mudarOpacidade(event)">93</button>
  <button id="dica1" onclick="mudarOpacidade(event)">976</button>
  <button id="dica3" onclick="mudarOpacidade(event)">1142</button>
  <!-- 把重复的dica6改为唯一ID，这里示例用dica4，你可以根据自己的顺序调整 -->
  <button id="dica4" onclick="mudarOpacidade(event)">213</button>
  <button id="dica2" onclick="mudarOpacidade(event)">615</button>
  <button id="dica7" onclick="mudarOpacidade(event)">987</button>
</div>

2. 优化JS逻辑 #

简化重复代码，先统一重置所有按钮状态再处理当前步骤的禁用逻辑，同时修改样式设置方式避免优先级问题：

var clicks = 0;
// 提前定义所有按钮ID，方便批量操作，缺少的ID可以自行补全
const allButtonIds = ["dica0", "dica1", "dica2", "dica3", "dica4", "dica5", "dica6", "dica7"];

function mudarOpacidade(event) {
  const targetBtn = event.target;
  // 直接修改opacity属性，不要用setAttribute覆盖整个style
  targetBtn.style.opacity = 0.5;
}

function desabilitar(event) {
  clicks += 1;
  // 先统一重置所有按钮的透明度和可点击状态
  allButtonIds.forEach(btnId => {
    const btn = document.getElementById(btnId);
    if (btn) {
      btn.style.opacity = 1;
      btn.disabled = false;
    }
  });
  // 仅禁用当前步骤对应的按钮，完全匹配你原来的case逻辑
  if (clicks >=1 && clicks <=7) {
    const currentDisabledBtn = document.getElementById(allButtonIds[clicks]);
    if (currentDisabledBtn) {
      currentDisabledBtn.disabled = true;
    }
  }
}

修改后213按钮会和其他按钮一起正常重置透明度，也只会在第6次点击「Próxima dica」时才会进入禁用状态。

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