javascript - 如何获得输入值的总和？

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

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