Javascript 通过Formset循环求和值-JQuery

我有一个Django表单集，其中每个表单都有一个class=

amount2

的金额。每次使用该类更改这些输入中的任何一个时，我都希望使用class

amount2

重新合计所有输入的值。目前我正在尝试这个

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += $(this).val();
    console.log(sum)
  })
})

当我记录

sum

时，我得到0，尽管我在输入中输入了5。所以我试着把它拨回一点，然后这样做

$('.amount2').on("input", function() {
  var sum = 0
  $('.amount2').each(function() {
    sum += 10;
    console.log(sum)
  })
})

该日志返回打印数字10，正如我在一次输入时预期的那样，在下一次输入时打印20

那么，我的第一部分出了什么问题

已更新

  {% for form in formset.forms %}
                <table id = 'manifest-table25' class="manifest-table2" width=100%>
                  {% csrf_token %}
                  <tbody width=100%>
                    <tr class="manifest-row">
                      <td width = 17.5% class="productCode" onchange="populateProduct(this)">{{form.ProductCode}}</td>
                      <td width = 32.5% class="description">{{form.DescriptionOfGoods}}</td>
                      <td width = 12.5% class="quantity" oninput="calculateUnit(this)">{{form.UnitQty}}</td>
                      <td width = 12.5% class="unitType">{{form.Type}}</td>
                      <td width = 10.5% class="price" oninput="calculate(this)">{{form.Price}}</td>
                      <td width = 12.5% class="amount2">{{form.Amount}}</td>
                      {% with url_name=request.resolver_match.url_name %}
                      {% if url_name == 'EditQuoteView' %}
                        <td>{{form.DELETE}}</td>

                      {% endif %}
                      {% endwith %}
                      {{form.id}}
                    </tr>
                  </tbody>
                </table>
              {% endfor %}

{%forformset.forms%}
{%csrf_令牌%}
{{form.ProductCode}
{{form.DescriptionOfGoods}}
{{form.UnitQty}
{{form.Type}
{{form.Price}}
{{form.Amount}}
{%的url\u name=request.resolver\u match.url\u name%}
{%if url_name='EditQuoteView%}
{{form.DELETE}
{%endif%}
{%endwith%}
{{form.id}
{%endfor%}

输入、文本区域、选择或内容可编辑值始终为字符串。（即使InputElement具有HTML属性

type=“number”

）。记住在做数学之前要处理转换

使用

parseInt（val，10）

，

parseFloat（val）

，

Number（val）

，或

BigInt（val）

等将字符串转换为整数、浮点或数字

const$amount2=$（'.amount2'）；
$amount2.on（“输入”，函数（）{
设和=0
$amount2.每个（函数（）{
总和+=数字（该值）；
});
$（“#amount2 sum”）。文本（sum）；
});

html元素的确切类型是
.amount2
？举个html的例子会很有帮助。为了消除一种可能性，我会尝试一些简单的方法，比如
sum+=Number（$（this）.val（））
。只是为了排除它不被类型化的可能性，这是一个很好的调试，但是您描述的结果的差异并没有加在一起（没有双关语的意思…好吧，也许有一点）。你确定第一个代码代表了你的实际代码吗？@slappy是的，它被复制并粘贴了-我尝试了下面的答案，但它们似乎仍然不起作用。输入是一个整数。我尝试了
sum+=Number（$（this）.val（））
，但它仍然返回0。我在上面添加了一段html。如果这是实际问题，用户不会看到
5555
，而不是结果为0吗？
var x=0；x+='5'是“05”，而不是0，因为用户说结果是第一个代码段。所以他们对这个问题的解释中缺少了一些东西。是的@Taplar，但我在OP的代码中看到的唯一问题是他处理字符串与数字的方式。不过，你可能是对的，应用程序的另一部分出现了一些问题，或者OP没有用语言表达出来——因此，上面的代码和示例您的
.reduce
回调可以是
（sum，el）=>sum+=+el.value
。。。
，sum
不会改变返回值value@slappy非常感谢，手指记忆有时很难：）