Question

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

app:icon="?some_attr"

Answer 1

这是您的代码，

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

因此，我将3和3放入每个输入中，并在输入下方使用100%进行渲染。

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

我建议您改用<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>

Answer 2

只能更新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>

点击事件监听器仅运行一次

2 个答案: