2

I'm having some trouble with my javascript, it's supposed to print out whatever information you write into the form, and it does, but then it disappears right away. Can't figure out what I've done wrong here, please help!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Javascript</title>
</head>
<body>

    <h1>Personal Data</h1>

    <p>Fill in your name in the form below:</p>
    <form>
        <fieldset>
            First name <input id="fname" type="text"><br>
            Last name <input id="lname" type="text"><br>
            Age <input id="age" type="number" value="0"><br>
            <button onclick="myFunction()">Click</button><br>
            <p id="demo"></p>
            <script>
                function myFunction() {
                    var age = document.getElementById("age").value;
                    var lname = document.getElementById("lname").value;
                    var fname = document.getElementById("fname").value;
                    document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>";
                }
            </script>
        </fieldset>
    </form>

</body>
</html>
CoderPi
  • 12,985
  • 4
  • 34
  • 62
John Carlson
  • 97
  • 9

5 Answers5

2

button elements are, by default, type="submit" (yes, really). Since your button is in a form, it submits the form. Since the form has no explicit action attribute, it submits itself to the current page URL, refreshing the page.

Add type="button" to the button, or remove the form.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

This button submits the form. Adding a return false there, prevents this submission from happening. So your code should be:

function myFunction() {
    var age = document.getElementById("age").value;
    var lname = document.getElementById("lname").value;
    var fname = document.getElementById("fname").value;
    document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>";
    return false;
}

And in the HTML:

<button onclick="return myFunction()">Click</button><br>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

<button onclick="myFunction()">Click</button>

This is causing your form to submit (which causes your javascript console to clear).

You can either return false; from myFunction() or you can do onclick="myFunction(); return false; or cancel the event or any number of other things.

How do I cancel form submission in submit button onclick event?

How to prevent form from being submitted?

You can also add type="button" to the button or eliminate the <form> tags.

Community
  • 1
  • 1
mikeb
  • 10,578
  • 7
  • 62
  • 120
0
    <form>
            <fieldset>
                First name <input id="fname" type="text"><br>
                Last name <input id="lname" type="text"><br>
                Age <input id="age" type="number" value="0"><br>
                <button onclick="return myFunction()">Click</button><br>
                <p id="demo"></p>
                <script>
                    function myFunction() {
                        var age = document.getElementById("age").value;
                        var lname = document.getElementById("lname").value;
                        var fname = document.getElementById("fname").value;
                        document.getElementById("demo").innerHTML = "<p>My name is " + fname + " " + lname + " and I am " + age + " years old!</p>";
return false;
                    }
                </script>
            </fieldset>
        </form>

use return to prevent it from submitting form

Domain
  • 11,562
  • 3
  • 23
  • 44
0

Inside your form, the buttons are considered "submit" type by default. To prevent this use type="button" with buttons.

Hope this helps :)

Tal
  • 1,091
  • 12
  • 25