如何通过DOM操作为多个按钮正确添加onclick点击属性？

问题根源 #

你给onclick赋值时直接执行了searchEngine(langButton)，相当于把函数执行后的返回值（也就是你return的button对象）赋值给了点击事件回调，而不是把函数本身绑定给点击事件，所以才会出现循环时函数立刻执行、后续点击无反应的情况。

解决方案 #

方法1：用匿名函数包裹调用 #

把原有绑定代码修改为以下写法即可正常触发：

langButton.onclick = function() {
  searchEngine(langButton);
};

你用let声明langButton不存在循环变量共享问题，点击时可以正常拿到对应按钮对象。

方法2：用addEventListener绑定 #

如果偏好addEventListener写法，调整为如下格式即可：

langButton.addEventListener('click', function() {
  searchEngine(langButton);
});

方法3：修改searchEngine返回值为函数 #

你也可以调整函数本身的写法，让它返回可执行的回调函数，原有绑定逻辑不用改就能生效：

function searchEngine(button) {
  return function() {
    // 此处写你实际需要执行的业务逻辑，比如打印按钮文本
    console.log(button.innerHTML);
  }
}

额外简化方案 #

如果不想手动传按钮参数，也可以在回调里直接用this获取触发点击的按钮对象：

langButton.onclick = function() {
  console.log(this.innerHTML); // 直接输出当前点击按钮的文本内容
}

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