L oop через набор форм для суммирования значений - JQuery

Question

У меня есть набор форм Django, в котором каждая форма имеет сумму с class = amount2. Каждый раз, когда вносятся изменения в любой из этих входов с этим классом, я хотел бы пересчитать значение всех входов с классом 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 %}

Answer 1

Input, textarea, select или contenteditable value is всегда String . (Даже если InputElement имеет атрибут HTML type="number"). Не забывайте всегда обрабатывать преобразование перед выполнением математических операций.

Используйте parseInt(val, 10), parseFloat(val), Number(val) или BigInt(val) et c. для преобразования строки в целое число, число с плавающей запятой или число

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  let sum = 0
  $amount2.each(function() {
    sum += Number(this.value);
  });
  $("#amount2-sum").text(sum);
});

<input type="number" class="amount2">
<input type="number" class="amount2">
<div id="amount2-sum"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Дополнительно для развлечения вы можете использовать jQuery s .get(), JS s .Array.prototype.reduce() и унарный + для принуждения Строка в число

const $amount2 = $('.amount2');

$amount2.on("input", function() {
  const sum = $amount2.get().reduce((sum, el) => sum + +el.value, 0);
  $("#amount2-sum").text(sum);
});

<input type="number" class="amount2">
<input type="number" class="amount2">
<div id="amount2-sum"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>