How to get sum of input values using Javascript?-CodePudding

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  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" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('0')">
            </td>
            <td>
                <input type="text" id="amount-0" 
                    disabled>
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" >
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="number" id="" 
                    onkeyup="Mul('1')">
            </td>
            <td>
                <input type="text" id="amount-1" 
                    disabled>
            </td>
        </tr>
    </tbody>
</table>
<table >
    <thead></thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td >Sub Total</td>
            <td  id="subTotal">0</td>
        </tr>
    </tbody>
</table>

CodePudding user response：

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;
}

CodePudding user response：

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  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" >
      </td>
      <td>
        <input type="number" id=""  onkeyup="Mul('0')">
      </td>
      <td>
        <input type="number" id=""  onkeyup="Mul('0')">
      </td>
      <td>
        <input type="text" id="amount-0"  disabled>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" >
      </td>
      <td>
        <input type="number" id=""  onkeyup="Mul('1')">
      </td>
      <td>
        <input type="number" id=""  onkeyup="Mul('1')">
      </td>
      <td>
        <input type="text" id="amount-1"  disabled>
      </td>
    </tr>
  </tbody>
</table>
<table >
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td >Sub Total</td>
      <td  id="subTotal">0</td>
    </tr>
  </tbody>
</table>