获取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一元加-何时使用

尝试将其更改为：

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

Answer 2

假设所有值都是integer并且您在函数中使用的元素的ID正确。 我已经修改了代码

function updateTotal() {
var totalline=document.getElementById("numberoflines").value;
var total=0;
    for (var i = 1; i < parseInt(totalline) ; i++ ) {
         var lineitem = document.getElementById("Line Item " + i); //avoid using space in the element's id remove spaces or user a hyphen (-) instead
         total+=parseFloat(lineitem);      
    }
    document.getElementById("totalpaying").value = total;
 }