使用JavaScript从输入中读取数字始终返回NaN

Question

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

下面的代码：

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

对不起为noob问题，但什么我'做错了什么？ 感谢您的帮助！

Answer 1

给id s到您的投入和使用document.getElementById识别它们唯一。然后，使用parseInt并将radix parameter设置为10来获取它们的十进制整型值，并按照您当前的方式显示结果。

<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返回元素的列表，你就必须要参考通过索引想要的，即使该列表中只包含一个元素。

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

Answer 2

使用getElementById并给每个这些Id。 getElementsByName返回一个数组。顺便说一句，这不是一个坏问题。这是一个常见的错误 - 通过使用jQuery处理包装集合的方式来解决这个错误。在JavaScript

Answer 3

字段都为字符串你需要INT，也.getElementsByName返回数组，你可能需要的第一要素，所以：

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

Answer 4

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

Answer 5

getElementsByName返回多个元素，因此复数Elements。你需要得到发现的第一个元素的属性：

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

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

---

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

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

Answer 6

getElementsByTagName返回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; 
} 

所以，你需要建立索引。另外为了不做字符串连接，需要parseInt with radix 10。除非你打算在你的计算器中接受八进制值。

Answer 7

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

尝试：

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> 

Answer 8

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

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