Javascript 单击eventListener仅运行一次

你能解释一下为什么这个简单网页上的按钮只运行一次吗？为什么重复点击不起作用？这与我将结果添加到页面正文的方式有关吗？我可以通过创建一个新的Div并为其添加答案来让它工作，但是我只想理解为什么这段代码不工作

文件
div{
保证金：0.6雷姆；
填充：0.4rem；
}
计算百分比
功能howManyPercent（部分、整体）{
退货部分/全部*100；
}
document.getElementById（“calculatePercentage”）.addEventListener（“单击”，函数）（）{
让partInput=document.getElementById（“part”）；
让wholeInput=document.getElementById（“整个”）；
让myAnswer=howManyPercent（partInput.value，wholeInput.value）；
document.body.innerHTML+=myAnswer+'%'；
})

您可以只更新

document.getElementById（“answerPercentage”）.innerHTML，而不是更新整个正文



文件
div{
保证金：0.6雷姆；
填充：0.4rem；
}
计算百分比
功能howManyPercent（部分、整体）{
退货部分/全部*100；
}
document.getElementById（“calculatePercentage”）.addEventListener（“单击”，函数）（）{
让partInput=document.getElementById（“part”）；
让wholeInput=document.getElementById（“整个”）；
让myAnswer=howManyPercent（partInput.value，wholeInput.value）；
document.getElementById（“answerPercentage”）.innerHTML=myAnswer+'%'；
})
这是您的代码：



文件
div{
保证金：0.6雷姆；
填充：0.4rem；
}
计算百分比
功能howManyPercent（部分、整体）{
退货部分/全部*100；
}
document.getElementById（“calculatePercentage”）.addEventListener（“单击”，函数）（）{
让partInput=document.getElementById（“part”）；
让wholeInput=document.getElementById（“整个”）；
让myAnswer=howManyPercent（partInput.value，wholeInput.value）；
document.body.innerHTML+=myAnswer+'%'；
})
document.body.innerHTML+=myAnswer+'%'是这里的罪魁祸首。通过这样做，您实际上重写了整个主体，这意味着以前的
按钮现在是一个新按钮，用新的html呈现，你应用到旧按钮上的javascript都不存在了。我认为会出现javascript错误，这样javascript就不会继续执行了。@TKol明白了！请随意回答这个问题。如果可能的话，你能指出是否有一种方法可以将点击事件监听器绑定到这样一种情况，即身体会像这样不断刷新？我将编写一个更完整的答案使用正确的元素来显示答案。document.getElementById（“answerPercentage”）.innerText=myAnswer+'%'；谢谢只是出于好奇，有没有办法让eventListener继续工作，即使我这样刷新身体？没有办法将事件绑定到动态内容吗？没有，如果要执行整个
document.body.innerHTML+=
route，每次更改正文时都必须重新绑定事件。你实际上是从dom中删除元素，然后重新写入，除非你每次都重新应用它，否则事件监听器是不可能存在的哦，事实上，你知道吗，我有点错了。有一种方法可以做到这一点，但我只知道如何使用jquery<代码>$（文档）.on（'click'，'#calculatePercentage'，function（）{}）
$（文档）。在（'click'，'#calculatePercentage'，func
上显示，
单击文档时，检查单击的元素是否与选择器#calculatePercentage匹配，以及它是否运行该函数