CODEWITHSUNDEEP
javascripthtmlforms
zah
zah

Reputation: 17

Why doesn't my result stay after I submit my form?

I'm trying to add two numbers that are put in input fields. Then I want to display the result but the result disappears right after.

function add() {
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    
    var result = num1 + num2;
    var display = document.getElementById("display");
    display.append(result);
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS</title>
    </head>
    <body id="body">
            <form action="" id="form">
                <label for="num1">Number 1</label>                
                    <input type="number" name="num1" id="num1">
                <label for="num2">Number 2</label>
                    <input type="number" name="num2" id="num2">
                <button id="submit" onclick="add()">Add</button>
            </form>
            <p id="display"></p>
            <script language="javascript" type="text/javascript" src="js.js"></script>
        </div>
    </body>
</html>

What am I doing wrong? Thanks for any help!

Upvotes: 0

Views: 245

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28424

You need to add event.preventDefault() to prevent this behavior, and convert the values to numeric form before the addition:

function add(e) {
    e.preventDefault();
    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;
    if(num1 && num2){
         var result = Number(num1) + Number(num2);
         var display = document.getElementById("display");
         display.append(result);
    }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS</title>
    </head>
    <body id="body">
            <form action="" id="form">
                <label for="num1">Number 1</label>                
                    <input type="number" name="num1" id="num1">
                <label for="num2">Number 2</label>
                    <input type="number" name="num2" id="num2">
                <button id="submit" onclick="add(event)">Add</button>
            </form>
            <p id="display"></p>
            <script language="javascript" type="text/javascript" src="js.js"></script>
        </div>
    </body>
</html>

Upvotes: 1

Related Questions