为何仅第一个按钮点击后变绿？HTML健身项目交互问题排查

• 问题根源：HTML里id是唯一属性，一个页面不能重复使用同一个id，浏览器只会优先识别第一个带该id的元素，这就是你点击只有第一个按钮变绿的原因。

• 具体修复步骤：

  1. 调整HTML：把所有目标按钮的id="done"替换成class="done"
  2. 修改JS选择器：将let btnDone = document.querySelectorAll('#done');改为let btnDone = document.querySelectorAll('.done');
  3. 批量绑定点击事件：遍历获取到的按钮列表，给每个按钮添加点击逻辑，示例代码：

     btnDone.forEach(btn => {
       btn.addEventListener('click', function() {
         // 直接修改背景色
         this.style.backgroundColor = 'green';
         // 更推荐用CSS类控制样式（需先定义好.btn-green类）
         // this.classList.add('btn-green');
       });
     });
     

  4. （推荐优化）用CSS类管理样式：先在样式表中定义：

     .btn-green {
       background-color: #2ecc71;
       color: #fff;
       border-color: #27ae60;
     }
     

     然后JS里使用this.classList.toggle('btn-green')，还能实现点击切换按钮状态的效果。

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