CODEWITHSUNDEEP
javascripthtmlevents
user44109
user44109

Reputation: 119

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?

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

Upvotes: 0

Views: 50

Answers (2)

TKoL
TKoL

Reputation: 13912

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.

But what happens is your code 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.

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>

Upvotes: 1

Prime
Prime

Reputation: 2849

Instead of updating whole body, you can update document.getElementById("answerPercentage").innerHTML only.

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

Upvotes: 0

Related Questions