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

我想创建一个计算器，它将两个字段相加。但无论我尝试什么，它都不起作用。如果我使用parseInt（），它也会返回“NaN”

代码如下：

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

函数doSum（）
{
var a=document.getElementsByName（“a”）.value；
var b=document.getElementsByName（“b”）.value；
var总和=a+b；
document.getElementById（“sum”）.value=sum；
}

a:


b:

Ergebnis

对不起，我问了那个问题，但我做错了什么？

---

谢谢你的帮助

使用getElementById并为每个Id指定一个Id。getElementsByName返回一个数组。顺便说一句这是个不错的问题。这是一个常见的错误，可以通过使用处理包装集的jQuery来解决。

JavaScript中的字段都是字符串您需要int，也需要

。getElementsByName

返回一个数组，您可能需要第一个元素，因此：

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

---

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

---

getElementsByName

返回多个元素，因此是复数

元素

。您需要获取找到的第一个元素的属性：

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

返回一个节点列表：这是使用该名称找到的所有元素的集合。它就像一个数组，您可以使用数字索引（如

[0]

）来访问找到的元素，其中有一个

长度

属性；没有其他类似于阵列的功能可用

---

此外，如果设置了

值

属性，则该属性将始终为字符串。当值为数字时，

+

运算符是加法运算符；如果它们是字符串，则为串联运算符<代码>“1”+“2”在Javascript中等于

“12”

。您需要使用

parseInt

将它们转换为数字：

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

返回一个：

---

因此，您需要对其进行索引。此外，为了不做字符串concate，需要。除非您计划在计算器中接受八进制值。

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

尝试：

函数doSum（）
{
var a=document.getElementById（“a”）.value；
var b=document.getElementById（“b”）.value；
var总和=a+b；
document.getElementById（“sum”）.value=sum；
}

a:


b:

Ergebnis

为您的输入提供

id

s，并使用

document.getElementById

唯一地识别它们。然后，使用设置为10的

parseInt

获取它们的十进制int值，并按当前方式显示结果

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

函数doSum（）
{
var a=parseInt（document.getElementById（“a”）.value，10）；
var b=parseInt（document.getElementById（“b”）.value，10）；
var总和=a+b；
document.getElementById（“sum”）.value=sum；
}

a:


b:

Ergebnis

---

getElementsByName

返回一个元素列表，即使该列表只包含一个元素，也必须通过索引引用所需的元素

---

getElementById

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

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

---

此外，值属性将是字符串，因此在进行加法之前需要将其转换为数字。

getElementsByName

不返回数组；它返回一个节点列表。

getElementsByName

返回一个节点列表，它表面上看起来像一个数组，但实际上不能执行数组方法，例如

push

，

join

，

slice

，etcSince

a

和

b

来自不受信任的来源，您可能应该在

parseInt

中包含一个基数参数。。。否则，如果用户输入

08

作为

a

的值和

1

作为b的值，您将得到

1

作为结果。您应该使用

parseInt（）

的

radix

参数来防止意外结果（“08”等）。如何检查该值是数字还是字符串。如果我有一个字符串而不是一个数字，我希望能够做一些不同的事情。我不想让程序退出，如果它不是一个数字，但我似乎无法让它工作。这是因为从输入返回的是字符串并且必须更改为数值吗？这将不起作用，因为

getElementsByName

返回元素的集合。此外，海报上说他们尝试了

parseInt

。

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>

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