javascript 按钮事件无法正常工作答案

【问题标题】：javascript button event dosent work correctlyjavascript 按钮事件无法正常工作
【发布时间】：2021-05-04 18:53:04
【问题描述】：

我有一个简单的 html 表，想动态地向它添加行。表格的某些单元格是我为其设置了 onclick 事件的按钮。在侦听器函数中，我只是记录你好。问题是，当我按下按钮时，它会在控制台上打印 123，然后页面和控制台会自动刷新。

这是我的代码：

let row= document.getElementById("table-body"); 
let cell = row.insertCell(0);
let serial = 123;
cell.innerHTML = "<button" + " onclick='removeServiceMap( " + serial + " )' " + ">" + "حذف" + "</button>";

和removeServiceMap函数如下：

function removeServiceMap (serial) {
     console.log(serial);
}

有人知道这段代码有什么问题吗？

【问题讨论】：

它无法读取属性“insertCell”，因为它的null 或0

标签： javascript listener

【解决方案1】：

您想使用以下方法制作元素：

const elm = document.createElement("tag");

然后您可以使用以下方法向其添加事件侦听器：

elm.addEventListener("click", (e) => {
    console.log(e.target.textContent);
});

如果要删除该行，只需选择父级并将其删除即可。

elm.addEventListener("click", (e) => {
    console.log(e.target.parentElement.remove());
});

要将您创建的元素添加到 DOM，请选择一个元素并使用 appendChild();

document.querySelector(selector).appendChild(element);

【讨论】：

【解决方案2】：

它在控制台上打印 123 然后页面和控制台会自动刷新

很可能，您的表格位于form 元素内，因此该按钮充当submit 按钮。

能否也分享一下 HTML 代码？如果可以帮助人们更好地理解您的问题。谢谢！

【讨论】：

没错，就是这样！！太感谢了。你节省了几个小时！ html 代码太长，我认为不会有太大帮助。
很高兴能帮上忙！