Javascript 如何获得输入值的总和？

您好，当任何输入被更改时，我正在尝试将输入总计添加到总计中。我一直把NaN放在总箱里。这是我的密码

<div class="col-md-6">
    <input type="text" placeholder="Description" class="form-control" id="d"     name="description" />                          
</div>

<div class="col-md-1">
    <input type="text" placeholder="price." class="form-control" id="q" name="itemprice"/>
</div>
<div class="col-md-1">
    <input type="text" placeholder="price" class="form-control" id="itemprice" name="itemprice1"/>
</div>
<div class="col-md-2">
    <input type="text" placeholder="price" class="form-control" id="itemprice" name="itemprice2" onchange="myFunction()"/>

<td>Subtotal</td>
<td class="total" id="tot" for="tot">
    <input type="total" id="total">

<script type="text/javascript">
function myFunction()
{
    var answer = document.getElementById('total');
    var x = document.getElementsByName('itemprice');
    var y = document.getElementsByName('itemprice1');
    var z = document.getElementsByName('itemprice2');
    var d = document.getElementsByName('itemprice3');
    answer.value = x.value + y.value + z.value + d.value;
}

</script>

小计
函数myFunction（）
{
var answer=document.getElementById（'total'）；
var x=document.getElementsByName（'itemprice'）；
var y=document.getElementsByName（'itemprice1'）；
var z=document.getElementsByName（'itemprice2'）；
var d=document.getElementsByName（'itemprice3'）；
answer.value=x.value+y.value+z.value+d.value；
}

document.getElementsByName返回节点列表（因为多个节点可以具有相同的名称）。（这就是为什么名称包含带有“s”的

元素，而不是
getElementById
，后者最多返回1个元素

这样的列表没有值。您可以获取每个元素的值，或者如果您知道它始终是一个值，则获取第一个元素的值：

var y = document.getElementsByName('itemprice1')[0].value

但是请注意，您没有任何名为
itemprice3
的元素，因此
document.getElementsByName（'itemprice3'）
将返回一个包含0项的节点列表。在这种情况下，上面的行将失败

还要注意，您有两个id为
itemprice
的元素，这是非法的

当这起作用时，您将需要
parseInt（）
将值转换为整数

answer.value = parseInt(x.value) + parseInt(y.value) + parseInt(z.value) + parseInt(d.value);

如果输入也可以包含浮点值，请使用
parseFloat
而不是
parseInt

请参阅：
使用Id（修复重复的Id，删除对itemprice3的引用，因为它在HTML中不存在）。在添加之前将文本值转换为数字

<div class="col-md-6">
<input type="text" placeholder="Description" class="form-control" id="d"     name="description" />

</div>
<div class="col-md-1">
<input type="text" placeholder="price." class="form-control" id="itemprice" name="itemprice"/>
</div>
<div class="col-md-1">
<input type="text" placeholder="price" class="form-control" id="itemprice1" name="itemprice1"/>
</div>
<div class="col-md-2">
<input type="text" placeholder="price" class="form-control" id="itemprice2" name="itemprice2" onchange="myFunction()"/>

<td>Subtotal</td>
<td class="total" id="tot" for="tot">
<input type="total" id="total">

<script type="text/javascript">
function myFunction()
{
var answer = document.getElementById('total');
var x = document.getElementById('itemprice');
var y = document.getElementById('itemprice1');
var z = document.getElementById('itemprice2');
//var d = document.getElementsById('itemprice3');

// parseFloat converts to values, otherwise you'll concatenate the strings.
answer.value = parseFloat( "0" + x.value ) + parseFloat("0" + y.value) + parseFloat("0" + z.value); // + d.value;


小计
函数myFunction（）
{
var answer=document.getElementById（'total'）；
var x=document.getElementById（'itemprice'）；
var y=document.getElementById（'itemprice1'）；
var z=document.getElementById（'itemprice2'）；
//var d=document.getElementsById（'itemprice3'）；
//parseFloat将转换为值，否则将连接字符串。
answer.value=parseFloat（“0”+x.value）+parseFloat（“0”+y.value）+parseFloat（“0”+z.value）；//+d.value；
itemprice3不存在我应该使用get-by id吗？如果您知道id以及它们何时是唯一的，那么可以使用。
getElementsByName
甚至
getElementsByTagName
也可以使用，只要您考虑到它们返回的不是单个元素而是零个或多个元素的列表。但是如果您有id，那么这是最简单的解决方案。好吧，我更改了ID并将其相加，但如果每个输入为1，则总计1111？？好吧。更进一步。
value
是一个字符串。您需要
parseInt（）
将其转换为整数。例如：
answer.value=parseInt（x.value）+parseInt（y.value）+..；
Cool你们真是太棒了。我要四处看看，看能不能让它返回小数点后两位。再次感谢，这次我打败了你们。：）如果一个是空的，它需要0。关于如何做到这一点有什么想法吗？@jeffPo：看我的编辑（添加“0”来处理空输入）。刚刚做了。再次感谢。我是一个彻头彻尾的傻瓜，但正在尝试。所以“0”也使其成为字符串