如何使用 DOM 操作将 onclick 属性添加到多个按钮答案

【问题标题】：How to add onclick property to multiple buttons using DOM manipulation [duplicate]如何使用 DOM 操作将 onclick 属性添加到多个按钮
【发布时间】：2021-10-21 15:00:01
【问题描述】：

我正在尝试使用 DOM 将 onclick 属性添加到多个按钮。 langButton.onclick = searchEngine(langButton); 不会将属性添加到按钮，并且 eventListener 也不起作用。我需要阅读被点击的特定按钮的文本，或者只是一起复制按钮。这是代码块：

for (j = 0; j < applications[i].languages.length; j++) {
  let langButton = document.createElement('button');
  langButton.classList.add('btn-secondary');
  langButton.innerHTML = `${applications[i].languages[j]}`;
  langButton.onclick = searchEngine(langButton);
  // console.log(langButton.innerHTML);
  langDiv.appendChild(langButton);
}

btn-secondary 是一个 Bootstrap 类。

function searchEngine(button) {
  return button
}

返回按钮，但每次尝试设置 onclick 属性时都会运行。然后按钮在单击后不会返回任何内容。 console.log(langButton.innerHTML) 返回按钮的文本就好了。

【问题讨论】：

onclick 需要一个函数； searchEngine(langButton) 不是函数。另外，使用event delegation 而不是分配多个事件监听器 — 它更易于维护，并且适用于动态添加的元素。例如，使用event argument 的target。见the tag info 和What is DOM Event delegation?。
langButton.innerHTML = `${applications[i].languages[j]}` 行可以缩短为 langButton.innerHTML = applications[i].languages[j]

标签： javascript dom button onclick

【解决方案1】：

事件监听器必须是一个函数。您正在调用函数，而不是分配函数。

langButton.addEventListener("click", () => searchEngine(langButton));

【讨论】：