Блог

Главная - Вопросы по программированию - Суммируйте добавленное входное значение с текущей суммой, используя jquery

Суммируйте добавленное входное значение с текущей суммой, используя jquery

#jquery #sum

#jquery #сумма

Вопрос:

Я пытаюсь пересчитать общее существующее значение, когда пользователь вводит новое значение в добавленный элемент ввода. Моя система может выполнить суммирование, но вычисление неверно, поскольку оно будет продолжать добавлять число, даже если входное число обновляется.

Например, исходная сумма равна 400 . Когда пользователь сначала вставляет 2 , сумма изменится на 402. Но когда пользователь вводит и входное значение становится 23 , новая сумма становится 425 такой, какой она должна быть 423

HTML

 <p id="total">400</p>
<div id="appended"></div>

<a href="#" onClick="AddRow()">Add Row</a>

jQuery

 $('#appended').on('input', '.amount', function(){
    var amount = parseFloat($(this).val());
  var total  = parseFloat($('#total').text())
  var new_total = amount total;
  
  $('#total').text(new_total)
})

Рабочий код можно найти здесь https://jsfiddle.net/foek1846 /

Комментарии:

1. Сначала сохранить исходную сумму в переменной?

2. Как? Я не вижу никакой разницы в этом.

3. Если вы сохраните начальную сумму в постоянной переменной, вы не будете ее перезаписывать, поэтому получите желаемые результаты

4. Не могли бы вы привести пример?

Ответ №1:

Сначала сохраните исходное total значение в переменной:

 const origTotal = Number($('#total').text());

function AddRow() {
  $('#appended').append(`<input class="form-control amount" value="" />`);
}

$('#appended').on('input', '.amount', function() {
  const amountSum = [...$('.amount')]
    .map(input => Number(input.value))
    .reduce((a, b) => a   b, 0);
  $('#total').text(origTotal   amountSum)
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="total">400</p>
<div id="appended"></div>

<a href="#" onClick="AddRow()">Add Row</a>