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

Question

我想创建一个计算器，它只对 2 个字段求和。但是无论我尝试什么都行不通。如果我使用 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>

抱歉这个菜鸟问题，但我做错了什么？感谢您的帮助!

Answer 1

为您的输入提供 id 并使用 document.getElementById 唯一地标识它们。然后，使用 parseInt 和 radix parameter 获取它们的十进制 int 值设置为 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 返回一个唯一标识的元素。