CODEWITHSUNDEEP
htmljavascript
user3210005
user3210005

Reputation: 43

integer output returning NaN in javascript

I'm trying to write this extremely simple javascript app where the user can input two numbers and the sum of these two is automatically outputted to screen. I'm very new to javascript so I'm not sure where I went wrong. The following code will print NaN for a second after I press the button. Any idea as to how I handle this input better?

<!DOCTYPE html>
<html>
<head>
<script>

function myFunction()
{
    var x = parseInt(first_num);
    var y = parseInt(second_num);
    var z = x + y;
    var a = z.toString();
    document.getElementById("demo").innerHTML = a;

}

</script>
</head>
<body>

<p>Enter two numbers to be added together.</p>
<form>
<input id="first_num" name="first_num" > first num<br>

<input id="second_num" name="second_num" > second num
<button onclick="myFunction()">calculate</button>

<p id="demo"></p>

</body>
</html>

Upvotes: 2

Views: 10290

Answers (5)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28568

Here is working demo.

The reason of NaN is you trying to parseInt with not initialized variable. beside this input tag is not closed.

function myFunction() {    
    document.getElementById("demo").innerHTML = parseInt(document.getElementById('first_num').value) + parseInt(document.getElementById('second_num').value);    
}

and html:

<p>Enter two numbers to be added together.</p>
<input id="first_num" name="first_num" />first num
<br>
<input id="second_num" name="second_num" />second num
<button onclick="myFunction()">calculate</button>
<p id="demo"></p>

Upvotes: 1

Saravana
Saravana

Reputation: 40632

You have to use a selector to get the value of the two input elements:

var x = parseInt(document.getElementById('first_num').value);
var y = parseInt(document.getElementById('second_num').value);
...

And you have to close your form tag in your HTML use and use a <input type="button"> instead of <button> so your form doesn't post unnecessarily.

<form>
    <input id="first_num" name="first_num" > first num <br />
    <input id="second_num" name="second_num" > second num <br />
    <input type="button" onclick="myFunction()" value="calculate">
</form>

Upvotes: 2

Shhade Slman
Shhade Slman

Reputation: 248

Do the following:

<p>Enter two numbers to be added together.</p>
<form>
<input id="first_num" name="first_num" > first num<br>

<input id="second_num" name="second_num" > second num
<button  onclick="myFunction(parseInt(document.getElementById("first_num").value),parseInt(document. getElementById("second_num").value))">calculate</button>

<p id="demo"></p>


function myFunction(first_num,second_num)
{
    var x = parseInt(first_num);
    var y = parseInt(second_num);
    var z = x + y;
    var a = z.toString();
    document.getElementById("demo").innerHTML = a;

}

Upvotes: 0

Allan Chua
Allan Chua

Reputation: 10185

Here is a working sample:

<!DOCTYPE html>
<html>
<head>
    <title>Page</title>
</head>
<body>

    <p>Enter two numbers to be added together.</p>

    <input id="first_num" name="first_num">first num<br />
    <input id="second_num" name="second_num">second num<br />

    <button onclick="myFunction()">calculate</button>
    <p id="demo"></p>

    <script>
        function myFunction() {
            var x = document.getElementById("first_num").value;
            var y = document.getElementById("second_num").value;

            var z = ((x && x != "") ? parseInt(x) : 0) + ((y && y != "") ? parseInt(y) : 0);
            document.getElementById("demo").innerHTML = z;
        }
    </script>
</body>
</html>

Upvotes: 0

thefourtheye
thefourtheye

Reputation: 239543

var x = parseInt(first_num);
var y = parseInt(second_num);

Instead of first_num and second_num, you need to retrieve the value from the input boxes, like this

var x = parseInt(document.getElementById("first_num").value);
var y = parseInt(document.getElementById("second_num").value);

Upvotes: 2

Related Questions