如何使用eventListener和getElementsByClass实现单函数替代多个按钮独立函数

实现方案 #

你的需求完全可以实现，使用事件监听统一处理逻辑的方案比单独编写每个函数的冗余方案可维护性高很多，具体实现如下：

第一步：调整HTML代码 #

移除所有按钮上冗余的onclick属性，调整后的代码如下：

<button class="Button"><span id="Ginga" class="Movements">ginga</span></button>
<button class="Button"><span id="Base" class="Movements">base</span></button>
<button class="Button"><span id="Role" class="Movements">role</span></button>
<button class="Button"><span id="Negativa" class="Movements">negativa</span></button>
<div id="SequenceContainer">
  <div id="Sequence"></div>
</div>

第二步：编写通用JS逻辑 #

只需要一段代码即可覆盖所有按钮的功能：

// 获取所有Button类的按钮
const buttons = document.getElementsByClassName('Button');
// 获取目标容器
const sequenceContainer = document.getElementById('Sequence');

// 遍历所有按钮绑定点击事件
for (let btn of buttons) {
  btn.addEventListener('click', function() {
    // 获取当前按钮内的Movements类节点
    const movementEl = this.querySelector('.Movements');
    // 克隆节点并追加到容器
    const cloneEl = movementEl.cloneNode(true);
    sequenceContainer.appendChild(cloneEl);
  });
}

方案优势 #

• 消除重复代码，整体代码量减少60%以上
• 扩展性强，后续新增同类型按钮仅需补充对应HTML结构，无需修改JS代码即可自动适配
• 符合前端结构与行为分离的规范，HTML代码中无需混杂JS事件声明，可读性更高

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