使用 JavaScript 从输入中读取数字总是返回 NaN

Reading numbers from inputs with JavaScript always returns NaN

提问by Crayl

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().

我想创建一个简单地将 2 个字段相加的计算器。但无论我尝试它都行不通。如果我使用 parseInt()，它也会返回“NaN”。

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!

对不起那个菜鸟问题，但我做错了什么？谢谢你的帮助！

回答by luvieere

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

给ids到您的投入和使用独特识别它们document.getElementById。然后，使用radix 参数设置为 10获取它们的十进制 int 值parseInt，并像当前一样显示结果。

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

getElementsByNamereturns 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.

getElementsByName返回一个元素列表，您必须通过索引引用您想要的元素，即使该列表只包含一个元素。

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

getElementById另一方面，通过其 id 返回唯一标识的元素。

回答by ek_ny

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.

使用 getElementById 并为每个提供一个 Id。getElementsByName 返回一个数组。顺便说一句..这不是一个坏问题。这是一个常见的错误——通过使用处理包装集的 jQuery 以某种方式解决了这个错误。

回答by Madara's Ghost

Fields in JavaScript are all stringsyou need int, also .getElementsByNamereturns an array, you probably need the first element, so:

JavaScript 中的字段都是你需要的字符串int，也.getElementsByName返回一个数组，你可能需要第一个元素，所以：

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

回答by lonesomeday

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

getElementsByName返回多个元素，因此是复数Elements。您需要获取找到的第一个元素的属性：

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

getElementsByNamereturns 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 lengthproperty; no other array-like functionality is available.

getElementsByName返回一个 NodeList：这是一组以该名称找到的所有元素。它就像一个数组，您可以使用数字索引（如[0]）来访问找到的元素，并且有一个length属性；没有其他类似数组的功能可用。

---

---

Furthermore, the valueproperty 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 parseIntto convert them to numbers:

此外，value如果设置了该属性，它将始终是一个字符串。该+操作是当值的数字加法运算; 如果它们是字符串，则它是连接运算符。 "1" + "2"相当于"12"在 Javascript 中。您需要使用parseInt将它们转换为数字：

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

回答by Joe

getElementsByTagNamereturns a node list:

getElementsByTagName返回一个节点列表：

 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 10is needed. Unless you plan to accept octal values in your calculator.

所以你需要索引它。另外为了不进行字符串concate，需要使用基数为10的parseInt。除非您打算在计算器中接受八进制值。

回答by Psyrus

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

getElementsByName 返回一个数组，该数组为您尝试执行的操作提供错误的数据类型。

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>

回答by HBP

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.

好的，有两个问题，你的 a 使用 getElementsByName 获取 a 和 b 的值，它返回一个值数组（因为可能有很多）。使用 getElementsById 并将 id 放入 HTML。

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

此外，值属性将是字符串，因此您需要在添加之前转换为数字。

回答by gre

a and b are strings so :

a 和 b 是字符串，所以：

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