gpt4 book ai didi

javascript - 按钮需要点击两次才能触发onclick

转载 作者:太空狗 更新时间:2023-10-29 15:43:51 24 4
gpt4 key购买 nike

为什么我的按钮需要点击两次才能触发 onclick 事件?stackoverflow 上还有一些其他线程也有同样的问题,但在我发现的所有线程中,原始海报将事件处理程序放在函数中。我的代码不是这样的。

HTML

<body>
<ul id="parentList">
<li>First child</li>
<li>Second child</li>
<li>Third child</li>
<li>Forth child</li>
<li>Fifth child</li>
</ul>
<button type="button" id="delete">Delete first child</button>
</body>

脚本:

var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {
parentList.removeChild(parentList.firstChild);
};

演示:onclick-error

最佳答案

parentList 中的第一个“元素”是空格。您可以通过在事件监听器中记录元素的控制台来查看这一点。

whitespace example

因此,您只需要过滤掉父项中的 li 元素。

document.getElementById("delete").onclick = function() {
var listItems = document.querySelectorAll("#parentList > li");

if (listItems.length > 0) {
listItems[0].remove();
}
};

https://jsfiddle.net/ofLvac32/13/

您也可以使用 parentList.firstElementChild 代替 parentList.firstChild,它会过滤掉所有无效节点(空白)。

这方面的一个例子

var parentList = document.getElementById("parentList");

document.getElementById("delete").onclick = function() {
parentList.removeChild(parentList.firstElementChild);
};

https://jsfiddle.net/ofLvac32/37/

关于javascript - 按钮需要点击两次才能触发onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43636285/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com