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>
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>
-
1
Uhm, where is
first_numandsecond_numing from ? – adeneo Commented Jan 18, 2014 at 14:24 -
1
The reason it goes away in a flash is because you're submitting the form. You need to add
;return false;to youronclickso it doesn't submit. – Barmar Commented Jan 18, 2014 at 14:26 -
You're also missing
</form>. – Barmar Commented Jan 18, 2014 at 14:26 - @adeneo: global variables created from the element IDs. – cookie monster Commented Jan 18, 2014 at 14:28
- @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 Commented Jan 18, 2014 at 14:33
5 Answers
Reset to default 2var 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);
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>
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>
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>
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;
}