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

Question

我在 Javascript 中并不完美...我想在不刷新页面的下一个名为 sub total 的字段中显示金额输入框中显示的值的总和。我正在尝试但无法成功。谁能帮我弄清楚....？ 谢谢.. n 个数字之和的 Javascript 代码。

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

每次使用新值添加小计时。

例如：您输入数量 10 和单价 1 然后数量为 10 ，这是您第一次在小计中没有任何值，因此您将在 parseInt(subTotalField.innerHTML) 值中得到 0。

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + 数量 * 价格；

subTotalField.innerHTML = 0 + 10*1

subTotalField.innerHTML = 10

但是当您在数量字段中将值从 10 更改为 20 时，这一次您在 subTotalField.innerHTML 中有值

所以现在是

subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + 数量 * 价格；

subTotalField.innerHTML = 10 + 20*1

subTotalField.innerHTML = 30

您期望它为 20，但代码返回 30

所以要解决这个问题，你应该用这个替换 mul 函数

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>