如何使用Vanilla Javascript获取输入的总价值?

时间:2017-12-06 03:25:22

标签: javascript totals

我正在尝试使用纯JavaScript从输入值中获取总金额,但它返回空白。每个输入的金额值的格式如下0.00

PHP

//rest of code
$i = 0;
while ($row = mysqli_fetch_array($result)) {$i++;
    <input id="Amount'.$i.'"  name="Amount" value="'.$plan['price'].'" type="text">
}

echo ' <input id="total"  name="finalResult" value="" type="text">';

JS

function totalResult(){
    var arr = document.getElementsByName('Amount');
    var total=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            total += parseInt(arr[i].value);
    }
    document.getElementById('total').value = total;
}

1 个答案:

答案 0 :(得分:1)

使用HTML5的查询selctor API function totalResult(){ var arr = document.querySelectorAll('input[name=Amount]'); var total=0; arr.forEach(function(item){ if(parseInt(item.value)) total += parseInt(item.value); }); document.getElementById('total').value = parseFloat(total).toFixed(2); } totalResult();,如下所示:

<input id="Amount1"  name="Amount" value="10.00" type="text" />
<input id="Amount2"  name="Amount" value="20.00" type="text" />
<input id="Amount3"  name="Amount" value="30.00" type="text" /><br>
Result: 
<input id="total"  name="finalResult" value="" type="text">
{{1}}