原生JS实现按钮组单按钮禁用功能异常求助

核心原因 #

HTML里id属性必须唯一，你给两个按钮都设了id="button"，调用document.getElementById("button")时只会返回第一个匹配的元素，所以不管点哪个按钮，都只会禁用第一个。

解决方案1：通过事件对象获取当前点击的按钮 #

修改HTML和JS代码，利用事件对象直接获取触发点击的按钮：

修改后的HTML #

<div class="new" id="counter">5</div>
<button class="subtract-btn" onclick="subtract(event)">exec</button>
<button class="subtract-btn" onclick="subtract(event)">exec</button>

修改后的JS #

let subtract = (event) => {
  let counter = document.getElementById("counter");
  // 通过event.target获取当前被点击的按钮
  let clickedButton = event.target;
  let newScore = Number(counter.innerText) - 1;
  console.log(newScore);
  counter.innerText = newScore;
  counter.classList.remove("new");
  // 禁用当前点击的按钮
  clickedButton.setAttribute("disabled", "");
}

解决方案2：用事件委托（更推荐，避免inline事件） #

如果不想用inline的onclick，可以给父元素绑定事件委托，更灵活且易于维护：

HTML #

<div class="new" id="counter">5</div>
<div class="button-container">
  <button class="subtract-btn">exec</button>
  <button class="subtract-btn">exec</button>
</div>

JS #

// 获取计数器和按钮容器
const counter = document.getElementById("counter");
const buttonContainer = document.querySelector(".button-container");

// 给容器绑定点击事件
buttonContainer.addEventListener("click", (event) => {
  // 判断点击的是目标按钮
  if (event.target.classList.contains("subtract-btn")) {
    const clickedButton = event.target;
    // 如果按钮已禁用，直接返回避免重复操作
    if (clickedButton.disabled) return;
    
    let newScore = Number(counter.innerText) - 1;
    console.log(newScore);
    counter.innerText = newScore;
    counter.classList.remove("new");
    clickedButton.setAttribute("disabled", "");
  }
});

这种方式不需要给每个按钮单独绑定事件，后续新增按钮也能自动生效。

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