单击事件侦听器仅运行一次
[英]Click eventListener runs only once
问题描述
Can you explain why the button on this simple webpage runs only once?
你能解释一下为什么这个简单网页上的按钮只运行一次吗？ Why do repeated clicks not work?为什么重复点击不起作用？ Has it something to do with the way I'm adding the result to the body of the page?这与我将结果添加到页面正文的方式有关吗？ I can get it to work by creating a new Div and adding the answer to that instead, but I would just like to understand the reason why this code is not working?我可以通过创建一个新的 Div 并为其添加答案来使其工作，但我只想了解此代码不起作用的原因？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 0.6rem; padding: 0.4rem; } </style> </head> <body> <div id="percentage"> <input type="number" id="part"> <input type="number" id="whole"> <button id="calculatePercentage">Calculate percentage</button> <div id="answerPercentage"></div> </div> <script> function howManyPercent(part, whole) { return part / whole * 100; } document.getElementById("calculatePercentage").addEventListener("click", function () { let partInput = document.getElementById("part"); let wholeInput = document.getElementById("whole"); let myAnswer = howManyPercent(partInput.value, wholeInput.value); document.body.innerHTML += myAnswer + '%'; }) </script> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-11-10 12:32:52
This is your code as you had it:这是您拥有的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 0.6rem; padding: 0.4rem; } </style> </head> <body> <div id="percentage"> <input type="number" id="part"> <input type="number" id="whole"> <button id="calculatePercentage">Calculate percentage</button> <div id="answerPercentage"></div> </div> <script> function howManyPercent(part, whole) { return part / whole * 100; } document.getElementById("calculatePercentage").addEventListener("click", function () { let partInput = document.getElementById("part"); let wholeInput = document.getElementById("whole"); let myAnswer = howManyPercent(partInput.value, wholeInput.value); document.body.innerHTML += myAnswer + '%'; }) </script> </body> </html>
So I put 3 and 3 into each input and it rerenders with 100% underneath the inputs.因此，我将3和3放入每个输入中，并在输入下方以100%渲染。
But what happens is your code document.body.innerHTML += myAnswer + '%';但是会发生什么是你的代码document.body.innerHTML += myAnswer + '%'; is rewriting the entire body from scratch with new html, so any javascript you ran on the old html dom elements is gone now.正在用新的 html 从头开始重写整个主体，因此您在旧的 html dom 元素上运行的任何 javascript 现在都消失了。
What I would recommend instead is to use your <div id="answerPercentage"></div> instead:我建议改为使用您的<div id="answerPercentage"></div> ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 0.6rem; padding: 0.4rem; } </style> </head> <body> <div id="percentage"> <input type="number" id="part"> <input type="number" id="whole"> <button id="calculatePercentage">Calculate percentage</button> <div id="answerPercentage"></div> </div> <script> function howManyPercent(part, whole) { return part / whole * 100; } document.getElementById("calculatePercentage").addEventListener("click", function () { let partInput = document.getElementById("part"); let wholeInput = document.getElementById("whole"); let myAnswer = howManyPercent(partInput.value, wholeInput.value); document.getElementById('answerPercentage').innerHTML = myAnswer + '%'; }) </script> </body> </html>
解决方案2
0 2020-11-10 12:29:25
Instead of updating whole body, you can update document.getElementById("answerPercentage").innerHTML only.您可以只更新document.getElementById("answerPercentage").innerHTML ，而不是更新整个正文。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 0.6rem; padding: 0.4rem; } </style> </head> <body> <div id="percentage"> <input type="number" id="part"> <input type="number" id="whole"> <button id="calculatePercentage">Calculate percentage</button> <div id="answerPercentage"></div> </div> <script> function howManyPercent(part, whole) { return part / whole * 100; } document.getElementById("calculatePercentage").addEventListener("click", function () { let partInput = document.getElementById("part"); let wholeInput = document.getElementById("whole"); let myAnswer = howManyPercent(partInput.value, wholeInput.value); document.getElementById("answerPercentage").innerHTML = myAnswer + '%'; }) </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.