바닐라 자바 ​​스크립트로 인풋의 총 가치를 얻는 방법?

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