バニラJavascriptで入力の合計値を取得するには？

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のクエリselctorの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">