JavaScript - result disappears immediately

Question

I am a beginner to JavaScript. I am buliding a BMI calculator. It gives the output for a few milliseconds and then the result disappears.

<!DOCTYPE html>
<html>
<head>
    <title>BMI Calculator</title>
</head>
<body>
        <form>
            Weight:-<input type="text" id="wtxt"><br>
            Height:-<input type="text" id="htxt"><br>
            BMI:-<input type="text" id="bmitxt"><br>

            <input type="reset" value="clear"><br>

            <button onclick="calcbmi()">Calc BMI</button>
        </form>

        <script type="text/javascript">
            function calcbmi(){
                var w=parseInt(document.getElementById('wtxt').value);
                var h=parseInt(document.getElementById('htxt').value);

                var z=w/(h*h);

                document.getElementById('bmitxt').value=z;
            }
        </script>
</body>
</html>

because a button is a submit button and the form submits. – epascarello May 23 '18 at 18:12 — epascarello, May 23 '18 at 18:12
onclick="calcbmi();return false;" – juvian May 23 '18 at 18:13 — juvian, May 23 '18 at 18:13
Remove the `
` element, you're not using it for anything.
– David May 23 '18 at 18:13 — David, May 23 '18 at 18:13
@juvian it also works .Thank you! – Chanuka Gayantha May 23 '18 at 18:25 — Chanuka Gayantha, May 23 '18 at 18:25

score 1 · Answer 1 · answered May 23 '18 at 18:59

To separate behavior from the view, you can do it like this:

The button:

<button>Calc BMI</button>

The script:

<script type="text/javascript">
    document.querySelector("button").addEventListener("click", function(event) {
        calcbmi();
        event.preventDefault();
    }, false);

    function calcbmi() {
        var w = parseInt(document.getElementById('wtxt').value);
        var h = parseInt(document.getElementById('htxt').value);

        var z = w / (h * h);

        document.getElementById('bmitxt').value = z;
    }
</script>

Source

The
has semantic usefulness and there may be cases where it's submitted to server as a backup calculator when the browser has disabled JavaScript for some reason. — Chris C., May 23 '18 at 19:01

score 0 · Answer 2 · answered May 23 '18 at 18:30

Looks like the comments are answering your question. Shortest path is to change the button to a different type so it doesn't submit the form, thus causing the page to load again. Form makes it simple for inputs, but isn't strictly necessary.

Calc BMI

More info here: How to prevent buttons from submitting forms

score 0 · Answer 3 · answered May 23 '18 at 18:32

By default, form makes a GET request on submit. Source

You're submitting the form each time you click submit and the browser is trying to make a request to nothing since there is no action attribute specified. I've copied a working example of your code below. As noted in the comments, remove the form. Your code will work then.

<!DOCTYPE html>
<html>
<head>
    <title>BMI Calculator</title>
</head>
    <body>

      Weight:-<input type="text" id="wtxt"><br>
      Height:-<input type="text" id="htxt"><br>
      BMI:-<input type="text" id="bmitxt"><br>

      <input type="reset" value="clear"><br>

      <button onclick="calcbmi()">Calc BMI</button>


      <script type="text/javascript">
         function calcbmi(){
            var w=parseInt(document.getElementById('wtxt').value);
            var h=parseInt(document.getElementById('htxt').value);

            var z=w/(h*h);

            document.getElementById('bmitxt').value=z;

        }
    </script>
</body>
</html>

You can see a fiddle here

JavaScript - result disappears immediately

3 Answers3