Reading numbers from inputs with JavaScript always returns NaN

Question

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!

luvieere · Accepted Answer · 2011-08-29 21:52:58Z

16

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.

edited Aug 29, 2011 at 21:52

answered Aug 29, 2011 at 13:18

luvieere

37.6k20 gold badges134 silver badges185 bronze badges

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

2 Comments

Madara's Ghost Over a year ago

You should be using the radix parameter of parseInt() to prevent unexpected results ("08" etc).

pixel 67 Over a year ago

How do I check if the value is a number or a string. I want to be able to do something different if I have a string as opposed to a number. I don't want the program to quit if it's not a number but I can't seem to get it to work. Is it because what's returned from the input is a string and has to changed to number value?

ek_ny · Accepted Answer · 2011-08-29 13:13:39Z

2

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.

answered Aug 29, 2011 at 13:13

ek_ny

10.3k8 gold badges51 silver badges60 bronze badges

2 Comments

lonesomeday Over a year ago

getElementsByName does not return an array; it returns a NodeList.

JaredMcAteer Over a year ago

getElementsByName returns a NodeList, which superficially looks like an array but you can't actually perform Array methods such as push, join, slice, etc

Joe · Accepted Answer · 2011-08-29 13:16:46Z

2

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.

answered Aug 29, 2011 at 13:16

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-08-29 13:21:20Z

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

Madara's Ghost · Accepted Answer · 2011-08-29 13:30:09Z

2

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

edited Aug 29, 2011 at 13:30

answered Aug 29, 2011 at 13:14

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

1 Comment

JaredMcAteer Over a year ago

Since a and b are coming from untrusted sources you should probably include a radix parameter with the parseInt... otherwise if the user enters 08 as a value for a and 1 for b you'll get 1 as the result.

Psyrus · Accepted Answer · 2011-08-29 13:17:45Z

1

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>

answered Aug 29, 2011 at 13:17

Psyrus

1,33112 silver badges12 bronze badges

Comments

HBP · Accepted Answer · 2011-08-29 13:19:17Z

1

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.

answered Aug 29, 2011 at 13:19

HBP

16.1k6 gold badges30 silver badges34 bronze badges

Comments

gre · Accepted Answer · 2011-08-29 13:14:30Z

0

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

answered Aug 29, 2011 at 13:14

gre

1,8412 gold badges16 silver badges26 bronze badges

1 Comment

Briguy37 Over a year ago

This will not work because getElementsByName returns a collection of elements. Also, the poster said they tried parseInt.

Collectives™ on Stack Overflow

Reading numbers from inputs with JavaScript always returns NaN

8 Answers 8

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related