如何使用 Javascript 获得输入值的总和？

Question

I am not perfect in Javascript... I want to display that total sum of values shown in the amount input boxes in the next field named the sub total without refreshing page. I am trying but can not get success.Can anuone will help me to figure it out....? Thanks.. Javascript code for sum of n numbers.

 function Mul(index) { var quantity = document.getElementsByClassName("quantity")[index].value; var price = document.getElementsByClassName("price")[index].value; document.getElementsByClassName("amount")[index].value = quantity * price; const subTotalField = document.getElementById("subTotal"); subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price; }

 <table class="table table-center table-hover" id="myTable"> <thead> <tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control"> </td> <td> <input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')"> </td> <td> <input type="number" id="" class="price form-control" onkeyup="Mul('0')"> </td> <td> <input type="text" id="amount-0" class="amount form-control" disabled> </td> </tr> <tr> <td> <input type="text" class="form-control"> </td> <td> <input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')"> </td> <td> <input type="number" id="" class="price form-control" onkeyup="Mul('1')"> </td> <td> <input type="text" id="amount-1" class="amount form-control" disabled> </td> </tr> </tbody> </table> <table class="table table-stripped table-center table-hover"> <thead></thead> <tbody> <tr> <td></td> <td></td> <td></td> <td class="text-end">Sub Total</td> <td class="text-end" id="subTotal">0</td> </tr> </tbody> </table>

Answer 1

Everytime you are adding the subtotal with the new value.

For example: you entered quantity 10 and unit price 1 then amount is 10, for the first time you don't have any value in sub total so you will get 0 in parseInt(subTotalField.innerHTML) value.

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;

subTotalField.innerHTML = 0 + 10*1

subTotalField.innerHTML = 10

But when you are changing value from 10 to 20 in the quantity field, this time you have value in subTotalField.innerHTML

So now it will be

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;

subTotalField.innerHTML = 10 + 20*1

subTotalField.innerHTML = 30

You are expecting it as 20 but the code is returning 30

So to resolve this issue, you should replace mul function with this

 function mul(index) { var quantity = document.getElementsByClassName("quantity")[index].value; var price = document.getElementsByClassName("price")[index].value; document.getElementsByClassName("amount")[index].value = quantity * price; const subTotalField = document.getElementById("subTotal"); var finalAmount = 0; Array.from(document.getElementsByClassName("amount")).forEach(ele=>{ if(ele.value){ finalAmount = finalAmount + ele.value } }) subTotalField.innerHTML = finalAmount; }

Answer 2

 function Mul(index) { var quantity = document.getElementsByClassName("quantity")[index].value; var price = document.getElementsByClassName("price")[index].value; document.getElementsByClassName("amount")[index].value = quantity * price; const subTotalField = document.getElementById("subTotal"); subTotalField.innerHTML = Array.from(document.getElementsByClassName("amount")).reduce((sum, element) => { if (element.value.length === 0) return sum; return sum + parseInt(element.value); }, 0) }

 <table class="table table-center table-hover" id="myTable"> <thead> <tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control"> </td> <td> <input type="number" id="" class=" quantity form-control" onkeyup="Mul('0')"> </td> <td> <input type="number" id="" class="price form-control" onkeyup="Mul('0')"> </td> <td> <input type="text" id="amount-0" class="amount form-control" disabled> </td> </tr> <tr> <td> <input type="text" class="form-control"> </td> <td> <input type="number" id="" class=" quantity form-control" onkeyup="Mul('1')"> </td> <td> <input type="number" id="" class="price form-control" onkeyup="Mul('1')"> </td> <td> <input type="text" id="amount-1" class="amount form-control" disabled> </td> </tr> </tbody> </table> <table class="table table-stripped table-center table-hover"> <thead></thead> <tbody> <tr> <td></td> <td></td> <td></td> <td class="text-end">Sub Total</td> <td class="text-end" id="subTotal">0</td> </tr> </tbody> </table>