时间戳

首页 > 解决方案 > 点击 eventListener 只运行一次

javascript - 点击 eventListener 只运行一次

问题描述

你能解释一下为什么这个简单网页上的按钮只运行一次吗？为什么重复点击不起作用？这与我将结果添加到页面正文的方式有关吗？我可以通过创建一个新的 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>

标签： javascripthtmlevents

解决方案

这是您的代码：

<!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>

因此，我将3and3放入每个输入中，并100%在输入下方重新渲染。

但是发生的情况是您的代码document.body.innerHTML += myAnswer + '%';正在使用新的 html 从头开始​​重写整个正文，因此您在旧的 html dom 元素上运行的任何 javascript 现在都消失了。

What I would recommend instead is to use your <div id="answerPercentage"></div> instead:

<!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>

推荐阅读