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

Posted

技术标签:

【中文标题】如何使用Javascript获取输入值的总和?【英文标题】:How to get sum of input values using Javascript? 【发布时间】:2022-01-24 05:14:34 【问题描述】:

我在 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>

【问题讨论】:

这能回答你的问题吗? jQuery sum of input values in sections 对我来说,你的 sn-p 工作。您需要在数量和单价字段中输入值。 【参考方案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;

【讨论】:

【参考方案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>

【讨论】:

以上是关于如何使用Javascript获取输入值的总和?的主要内容,如果未能解决你的问题,请参考以下文章

如何在飞镖列表中获取重复值的总和?

如何从此查询中获取“temp”列值的总和?

如何从 Angular2(Typescript)中的 Json 数组中获取值的总和

BigQuery 如何获取 JSON 结构中的值的总和?

如何获取单个整数/浮点列的总和达到某个值的行

如何使用 BigQuery 在没有每个元素的情况下获取所有总和值?