使用javascript将onclick添加到按钮[重复]答案

【问题标题】：Add onclick to a button with java script [duplicate]使用javascript将onclick添加到按钮[重复]
【发布时间】：2021-06-18 02:51:50
【问题描述】：

我正在表格中创建一个按钮列表，如下所示：

let tbody = document.createElement("tbody");
  tbody.className = "table-responsive";
  let id = 0;
  for (let c of rows) {
    let tr = document.createElement("tr");
    tr.className = "table";
    for (const v of c) {
      let td = document.createElement("td");
      td.className = "table";
      let txt = document.createTextNode(v);
      td.appendChild(txt);
      tr.appendChild(td);
    }
    id++;
    let button = document.createElement("button");
    button.innerHTML = "ACTUALIZAR DATOS";
    button.className = "btn btn-outline-primary";
    button.id = id++;
    button.onclick = upgradePet();
    tr.appendChild(button);
    tbody.appendChild(tr);
  }

表格显示正确，但是当我尝试添加.onclick，但当表格加载时，它会立即调用函数upgradePet()，而无需我点击它。

我尝试做：

button.addEventListener("click", upgradePet());
button.onclick = upgradePet();

但两者都会在表格完成渲染时调用该函数。

【问题讨论】：

addEventListener in Javascript triggers the click event automatically 的副本。

标签： javascript html dom button

【解决方案1】：

从您的 upgradePet 中删除括号，因为它代表一个函数调用（这意味着您不仅仅是在点击事件上定义函数，而是直接调用它）。

所以这很好用，

button.onclick = upgradePet;

如果您需要定义带参数的函数，您可以按如下方式编写它们，

button.onclick = () => upgradePet(param);

【讨论】：

【解决方案2】：

删除双亲。

addEventListener

onclick

button.addEventListener("click", upgradePet);
button.onclick = upgradePet;

【讨论】：

【解决方案3】：

有两件事要解决：

将函数对象添加为事件侦听器，而不是调用处理函数返回的值。返回值通常是undefined，或者更罕见的是布尔值：

element.addEventListener( eventName, handler); ✔️ element.addEventListener( eventName, handler());❌
不要将<button> 元素附加到表格行 - 它们不是<tr> 元素的valid child elements。创建一个额外的td 元素，将按钮元素放入其中并将创建的表格数据元素附加到表格行。

【讨论】：