CODEWITHSUNDEEP
javascript
Crayl
Crayl

Reputation: 1911

Reading numbers from inputs with JavaScript always returns NaN

I want to create a calculator which simply sums 2 fields up. But whatever I try it does not work. It also returns "NaN", also if I use parseInt().

Here's the code:

 <script type="text/javascript" language="Javascript">
 function doSum() 
 {
 var a = document.getElementsByName("a").value;
 var b = document.getElementsByName("b").value;

 var sum =  a + b;

 document.getElementById("sum").value = sum;
}
</script>

<form action="" method="POST">
<br/>a:<br/>
<input type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>

Sorry for that noob question, but what I'am doing wrong? Thanks for any help!

Upvotes: 14

Views: 24389

Answers (8)

luvieere
luvieere

Reputation: 37494

Give ids to your inputs and identify them uniquely using document.getElementById. Then, obtain their decimal int values using parseInt with the radix parameter set to 10 and display the result as you currently do.

<script type="text/javascript" language="Javascript">
 function doSum() 
 {
  var a = parseInt(document.getElementById("a").value, 10);
  var b = parseInt(document.getElementById("b").value, 10);

  var sum =  a + b;

  document.getElementById("sum").value = sum;
}
</script>

<form action="" method="POST">
 <br/>a:<br/>
<input type="text" id="a" onblur='doSum()' value="0" size="5" />
 <br/>b:<br/>
<input type="text" id="b" onblur='doSum()' value="0" size="5" />
 <br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>

getElementsByName returns a list of elements and you'd have to refer to the one you want through an index, even if the list contains only one element.

getElementById on the other hand, returns an uniquely identified element, by its id.

Upvotes: 16

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

Fields in JavaScript are all strings you need int, also .getElementsByName returns an array, you probably need the first element, so:

var a = parseInt(document.getElementsByName("a")[0].value, 10);
var b = parseInt(document.getElementsByName("b")[0].value, 10);

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237935

getElementsByName returns multiple elements, hence the plural Elements. You need to get the property of the first element found:

var a = document.getElementsByName('a')[0].value;

getElementsByName returns a NodeList: this is a set of all the elements found with that name. It is like an array in that you can use numeric indexes (like [0]) to access the elements found and in that there is a length property; no other array-like functionality is available.

Furthermore, the value property will always be a string if it is set. The + operator is the addition operator when the values are numbers; if they are strings, it is the concatenation operator. "1" + "2" is equal to "12" in Javascript. You need to use parseInt to convert them to numbers:

var a = document.getElementsByName('a')[0].value;
a = parseInt(a, 10); // parse as a number in base 10

Upvotes: 2

HBP
HBP

Reputation: 16043

OK, two issues, your a fetching the valurs of a and b using getElementsByName which returns an array of values (since there could be many). Use getElementsById and put ids in the HTML.

Also the value properties will be strings so you will need to convert to numbers before doing your addition.

Upvotes: 1

Psyrus
Psyrus

Reputation: 1321

getElementsByName returns an array which gives you the wrong data type for what you are trying to do.

try:

function doSum() 
{
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;

  var sum =  a + b;

  document.getElementById("sum").value = sum;

}
</script>

<form action="" method="POST">
<br/>a:<br/>
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>

Upvotes: 1

Joe
Joe

Reputation: 82624

getElementsByTagName returns a node list:

 function doSum() 
 {
     var a = document.getElementsByName("a")[0].value;
     var b = document.getElementsByName("b")[0].value;

     var sum =  parseInt(a, 10) + parseInt(b, 10);

     document.getElementById("sum").value = sum;
}

So you will need to index it. In addition in order not to do a string concate, parseInt with radix 10 is needed. Unless you plan to accept octal values in your calculator.

Upvotes: 2

gre
gre

Reputation: 1841

a and b are strings so :

 function doSum() 
 {
 var a = parseInt(document.getElementsByName("a").value);
 var b = parseInt(document.getElementsByName("b").value);

 var sum =  a + b;

 document.getElementById("sum").value = sum;
}

Upvotes: 0

ek_ny
ek_ny

Reputation: 10243

use getElementById and give each of those an Id. getElementsByName returns an array. By the way.. it's not a bad question. It's a common error-- one that is addressed in a way by using jQuery which deals in wrapped sets.

Upvotes: 2

Related Questions