integer output returning NaN in javascript

Question

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>

The reason it goes away in a flash is because you're submitting the form. You need to add ;return false; to your onclick so it doesn't submit. — Barmar
– Barmar, Commented Jan 18, 2014 at 14:26
@cookiemonster - that would be so called "named elements", and it's generally not a good idea to rely on those, but true, in the window scope the elements would be available that way. — adeneo
– adeneo, Commented Jan 18, 2014 at 14:33

thefourtheye · Accepted Answer · 2014-01-18 14:24:28Z

2

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);

answered Jan 18, 2014 at 14:24

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saravana · Accepted Answer · 2014-01-18 14:31:22Z

2

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>

edited Jan 18, 2014 at 14:31

answered Jan 18, 2014 at 14:24

Saravana

41k20 gold badges110 silver badges112 bronze badges

Comments

Zaheer Ahmed · Accepted Answer · 2014-01-18 14:31:39Z

1

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>

answered Jan 18, 2014 at 14:31

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

1 Comment

user3210005 Over a year ago

I see, I see that I needed to close my input tag but why would that cause my output to only be temporary? Is it because I am continuing to poll for new input when my tag is not closed?

Allan Chua · Accepted Answer · 2014-01-18 14:27:00Z

0

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>

answered Jan 18, 2014 at 14:27

Allan Chua

10.3k9 gold badges45 silver badges67 bronze badges

Comments

Shhade Slman · Accepted Answer · 2014-01-18 14:30:04Z

0

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;

}

answered Jan 18, 2014 at 14:30

Shhade Slman

2482 silver badges10 bronze badges

2 Comments

cookie monster Over a year ago

I personally don't mind a simple function call inline, but IMO, that's quite a bit of code to embed, especially when you're calling a function anyway.

Shhade Slman Over a year ago

you right, but what I want to do is to disconnect the function from the html element, I can do: onclick="myFunction("first_num","second_num")" and inside the function i will get the dom element.

Collectives™ on Stack Overflow

integer output returning NaN in javascript

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related