Автоматический подсчет суммы в JavaScript для новичка

Оффтоп javascript
1

Привет всем! Извините за возможно глупый вопрос по JavaScript, но я только начинаю изучать этот язык. У меня есть функция которая считает общую сумму в таблице, но она работает только когда я нажимаю кнопку для отправки формы. Как мне сделать так чтобы сумма пересчитывалась автоматически каждый раз когда пользователь вводит новую стоимость в поле?

function calculateSum() {
  var amounts = document.getElementsByName("amount[]");
  var sum = 0;
  for (var j = 1; j <= amounts.length; j++) {
    computeValue(j);
    var cost = parseFloat(document.getElementById("cost" + j).value);
    sum += isNaN(cost) ? 0 : cost;
  }
  document.getElementById("finalSum").value = isNaN(sum) ? "0.00" : sum.toFixed(2);
}

Буду очень благодарен за помощь и объяснение как это реализовать!

2

Повесь обработчик события на поля ввода! Проще всего добавить addEventListener с типом ‘input’ на каждое поле. После создания полей добавь document.getElementById("cost" + j).addEventListener('input', calculateSum); - функция будет вызываться при каждом изменении. Только помни: это срабатывает на каждый символ. Если нужна оптимизация - используй debounce или событие ‘change’ вместо ‘input’.

3

Проще всего добавить oninput="calculateSum()" прямо в инпуты. Работает при каждом изменении, а не только когда теряется фокус как с onchange. Код: <input type="number" name="amount[]" oninput="calculateSum()">. Старый способ, но для новичков - самый понятный.

4

Можно использовать onchange прямо в HTML - <input onchange="calculateSum()">. Это не самый современный подход, но проще для новичков. И кстати, ваш цикл выглядит странно - for (var j = 1; j <= amounts.length; j++), так как массивы начинаются с 0. Это не вызовет ли проблем?