JavaScript动态创建按钮仅最后一个点击事件触发无报错如何解决

你每次修改#button-section的innerHTML属性时，浏览器会先清空容器内所有已存在的DOM节点，再把拼接后的HTML字符串解析成新的DOM节点插入。你前三次给按钮a、b、c绑定完点击事件后，下一次调用button函数修改innerHTML时，这三个已经绑定了事件的按钮节点直接被销毁了，新渲染出来的a、b、c按钮并没有绑定过事件，所以只有最后生成的按钮d可以触发点击。

不要用拼接innerHTML的方式新增元素，改用document.createElement创建按钮元素，再用appendChild插入容器，这样不会影响已存在的节点和绑定的事件。修正后的JS代码如下：

window.onload = function() {
  const buttonSection = document.getElementById("button-section")
  function button(text, id, event) {
    let starterErrMsg = "button(text,id,event) -> ";
    if (text === undefined) throw starterErrMsg + "text is undefined";
    if (id === undefined) throw starterErrMsg + "id is undefined";
    if (event === undefined) throw starterErrMsg + "event is undefined";
    // 创建外层center节点
    const centerWrapper = document.createElement('center')
    // 创建按钮节点
    const btn = document.createElement('button')
    btn.id = id
    btn.className = 'action'
    btn.innerText = text
    btn.addEventListener('click', event)
    // 插入节点
    centerWrapper.appendChild(btn)
    buttonSection.appendChild(centerWrapper)
    console.log(id);
    console.log(event);
  }

  button("hello! (a)", "a", function() {
    alert("hi! (a)");
  });
  button("hello! (b)", "b", function() {
    alert("hi! (b)");
  });
  button("hello! (c)", "c", function() {
    alert("hi! (c)");
  });
  button("hello! (d)", "d", function() {
    alert("hi! (d)");
  });
}

原有HTML、CSS代码无需修改即可正常运行，所有按钮的点击事件都能正常触发。

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