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提供给您的输入，并使用document.getElementById唯一标识它们。然后，使用parseInt获取其十进制int值，并将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以某种方式解决这个问题。

Answer 3

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

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

Answer 4

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

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

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

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

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

Answer 5

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 6

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 7

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

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

Answer 8

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

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

8 个答案: