CODEWITHSUNDEEP
javascript
Geekender
Geekender

Reputation: 809

Can only get NaN to return from simple Javascript form

I am new to JS so please be gentle. What is going wrong with this code? I think I am getting the text from several fields, adding them together and showing the result.

<html>
<head>

<script type="text/javascript">
function displaySum()
{
var number1 = parseInt(document.getElementById("number1").text);
var number2 = parseInt(document.getElementById("number2").text);
var number3 = parseInt(document.getElementById("number3").text);
var number4 = parseInt(document.getElementById("number4").text);
var number5 = parseInt(document.getElementById("number5").text);
var sum = eval(number1 + number2 + number3 + number4 + number5);

document.getElementById("showsum").innerHTML=sum;

}
</script>
</head>
<body>
<form>
First Number: <input type="text' name="number1" id="number1" /><br />
<p id="numberOne"></p>
Second Number: <input type="text' name="number2" id="number2" /><br />
Third Number: <input type="text' name="number3" id="number3" /><br />
Fourth Number: <input type="text' name="number4" id="number4" /><br />
Fifth Number: <input type="text' name="number5" id="number5" /><br />
<button type="button" onclick="displaySum()">Display Sum</button>
<p id="showsum"></p>
</form>
</body>
</html>

Upvotes: 2

Views: 1583

Answers (1)

Michael Berkowski
Michael Berkowski

Reputation: 270637

Instead of the .text property, you want .value. Also, use the second radix parameter to parseInt(), to guard against accidental incorrect parsing of octal numbers with leading zeros.

var number1 = parseInt(document.getElementById("number1").value, 10);
var number2 = parseInt(document.getElementById("number2").value, 10);
// etc..

// Don't eval(), just add them.
var sum = number1 + number2 + number3 + number4 + number5;

Here's the full solution in action on jsFiddle.

Upvotes: 5

Related Questions