JavaScript实现多按钮点击切换value 解决仅首个按钮生效问题

你现在的代码有两个核心问题导致只有第一个按钮生效：

• HTML规范要求id是页面内唯一标识，不允许多个元素使用相同的id="btn"，document.getElementById("btn")只会匹配到页面中第一个符合id的元素，剩下两个按钮根本没有绑定上点击事件
• 第一个按钮的id属性书写错误：id=-btn"缺失属性值开头的引号，属于无效语法
• 原逻辑只针对单个元素绑定事件，没有覆盖所有需要切换功能的按钮

不需要给每个按钮写独立id、单独绑定逻辑，两种方案都可以用一套逻辑覆盖所有按钮：

方案1：事件委托（推荐） #

直接把事件绑定到上层父节点，不用逐个给按钮绑定，后续动态新增的同类型按钮也能自动生效，不需要额外写绑定逻辑。
修正后完整代码：

<!-- 给所有需要切换文本的按钮加统一类名，删掉重复、写错的id -->
<input class="toggle-add-btn" type="button" value="ADD" />
<input class="toggle-add-btn" type="button" value="ADD" />
<input class="toggle-add-btn" type="button" value="ADD" />

<script>
// 事件绑定到document（也可以绑定到按钮外层的共同容器元素）
document.addEventListener('click', function(e) {
  // 只响应目标按钮的点击
  if (e.target.classList.contains('toggle-add-btn')) {
    e.target.value = e.target.value === 'ADD' ? 'ADDED' : 'ADD'
  }
}, false)
</script>

方案2：批量获取元素绑定 #

适合页面加载完成后就存在、不会动态新增的静态按钮：

<input class="toggle-add-btn" type="button" value="ADD" />
<input class="toggle-add-btn" type="button" value="ADD" />
<input class="toggle-add-btn" type="button" value="ADD" />

<script>
// 选中所有带统一类名的按钮，遍历绑定同一个事件函数
document.querySelectorAll('.toggle-add-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    this.value = this.value === 'ADD' ? 'ADDED' : 'ADD'
  }, false)
})
</script>

两种方案都只需要写一次逻辑，不管加多少个同功能按钮，只要加上对应的统一类名就能自动实现文本切换，不需要额外改JS代码。

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