Javascript事件监听器只能运行一次

我无法理解为什么下面的代码只运行一次。任何帮助将非常感激。被难倒就这一个了几天现在：Javascript事件监听器只能运行一次

const button = document.querySelector("#myBtn"); 
 
var clickCount = 0; 
 

 
function myFunction() { 
 
    clickCount++; 
 
    document.body.innerHTML += "<br><br>Button was clicked " + clickCount + " time(s)"; 
 
    console.log("Button was clicked " + clickCount + " time(s)"); 
 
} 
 

 
button.addEventListener("click", myFunction, false);

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <head><script src="script.js" defer></script></head> 
 
<button id="myBtn">Try it</button> 
 
</body> 
 
</html>

在此先感谢！

来源

2017-10-17 servo

不要使用'body.innerHTML + = ...'来添加元素，因为这会覆盖整个现有的主体，并且实际上重新创建DOM *而不用*您的事件处理程序。您可以使用['.appendChild（）']（https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild），或者如果您真的想简单地追加一串HTML然后在特定元素上使用'.innerHTML + = ...'，而不是在整个主体上。 – nnnnnn

好的，谢谢！我在体内创建了一个div元素来代替它，现在它按预期工作。然而，我仍然有点困惑，至于为什么它不会在console.log部分工作。在附注中，我也意识到我正在将头标签放入身体内部。 – servo

从@nnnnnnn，

不要使用body.innerHTML + = ...来添加元素，因为这覆盖整个现有机构和效果再现了DOM

您可以在您的身体中添加一个像这样的<div id="msg"></div>这样的新div，以显示您的按钮点击事件消息。

const button = document.querySelector("#myBtn"); 
 
var clickCount = 0; 
 

 
function myFunction() { 
 
    clickCount++; 
 
    document.getElementById('msg').innerHTML += "<br><br>Button was clicked " + clickCount + " time(s)"; 
 
    console.log("Button was clicked " + clickCount + " time(s)"); 
 
} 
 

 
button.addEventListener("click", myFunction, false);

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <head><script src="script.js" defer></script></head> 
 
<button id="myBtn">Try it</button> 
 
<div id="msg"></div> 
 
</body> 
 
</html>

来源

2017-10-17 01:52:34

谢谢，@nnnnnnn！跟随你的建议。现在按预期工作。 – servo

你的摧毁你做body.innerHTML +=连接监听器。这里是你可以尽量避免什么：

document.body.insertAdjacentHTML('beforeend', "<br><br>Button was clicked " + clickCount + " time(s)");

insertAdjacentHTML是快速和可靠。

您也可以尝试appendChild但这意味着您需要追加HTMLElement。

来源

2017-10-17 02:34:46 Claudiordgz

谢谢，先生！我不熟悉insertAdjacentHTML方法，但我会开始试验它。 – servo

Javascript事件监听器只能运行一次

回答

相关问题