javascript - 让javascript将金额添加到onkeyup上的总计框中

Question

<% total = 0 %>
<% line = 1 %>
<% FOREACH r IN records %>
<% total = total + r.AmountOwed %>

        <div class="w-row lineitems">
          <div class="w-col w-col-4">
            <div><% r.ServiceDate %></div>
          </div>
          <div class="w-col w-col-4">
            <div>$<% r.AmountOwed %></div>
          </div>
        
          <div class="w-col w-col-4 column-left">
            <input id='Line Item <% line %>' type="text" onkeyup="updateTotal()" placeholder="Amount" name="AmountPaying" class="field m w-input" value="<% r.AmountOwed %>" >
            
          </div>

        </div>
<% line = line + 1 %>
<% END %>
    <input id="numberoflines" type="hidden" name="numberoflines" value='<% line %>'>
       <div class="lineitems w-row">
          <div class="w-col w-col-4">
            <div>
              <div class="footerblock">Total</div>
            </div>
          </div>
          <div class="w-col w-col-4">
            <div>
              <div class="footerblock"> $<% total %></div>
            </div>
          </div>

我有一个表单，它使用一个循环来用欠款金额填充订单项。根据数据库中的内容，可以有任意数量的行项目。每个行项目旁边是一个输入框，您可以在其中输入要支付的金额。在行项目的末尾有一个输入框，应该使用 onkeyup 更新它添加所有支付的金额以显示已输入的总金额。这是我用来执行此操作的 javascript，但它仅使用最后一个订单项中的内容更新总框。 numberoflines 具有行项目的总数。

function updateTotal() {
    for (i = 1; i < document.getElementById("numberoflines").value; i++ ) {
      document.getElementById("totalpaying").value = (+document.getElementById(("Line Item " + i)).value);
    }

Answer 1

因为您一直在替换值而不是添加值。您需要使用 += 而不仅仅是 =

此外，根据 Emile Bergeron，我已经包含了 Number() Javascript 函数，因为如果其中没有数字，它将返回 NaN输入。请记住，您也应该自己检查一下。有关使用 Javascript 进行数值解析的更多信息，请参阅此问答:parseInt vs unary plus - when to use which

尝试将其更改为:

function updateTotal() {
    var total = 0;
    for (i = 1; i < document.getElementById("numberoflines").value; i++ ) {
      total += Number(document.getElementById(("Line Item " + i)).value);
    }
    document.getElementById("totalpaying").value = total;
}