Question

你好我试图在任何输入改变时将输入总数添加到总计。我总是在总箱子里拿到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>

Answer 1

document.getElementsByName返回节点列表（因为多个节点可以具有相同的名称）。（这就是为什么名称包含带有's'的Elements而不是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。

请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 2

使用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;

如何获得输入值的总和？

2 个答案: