javascript - 如何使用 Vanilla Javascript 获取输入的总值(value)？

Question

我正在尝试使用纯 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;
}

Answer 1

使用 HTML5 的查询选择器 API querySelectorAll()，如下所示:

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