如何获得输入值的总和？

Question

hello im trying to add input totals to a grand total when any input is changed. i keep getting NaN in the total box. here is my code

<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 returns a nodelist (because multiple nodes can have the same name). (That's why the name contains Elements with an 's' as opposed to getElementById , which returns 1 element at most.

Such a list doesn't have a value. You would either get the value of each element, or if you know it will always be one, get the value of the first element:

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

But note, you don't have any elements that have the name itemprice3 , so document.getElementsByName('itemprice3') will return a nodelist with 0 items. The line above will fail in that case.

Also note, you have two elements with id itemprice , which is illegal.

When that works, you will need parseInt() to convert the values to integers.

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

If the inputs can contain floating point values as well, use parseFloat instead of parseInt .

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

Answer 2

Use Id's (fix duplicate id, remove reference to itemprice3 as it doesn't exist in the HTML). Convert text values to numbers before adding.

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