Принимайте несколько числовых входных данных и автоматически суммируйте их в JavaScript при изменении ввода. ⇐ Javascript

[Anonymous]

Как сказано в заголовке, я хотел бы принимать и отображать числовые входные данные (в частности, общую площадь в квадратных метрах) и динамически отображать их в виде суммы всякий раз, когда пользователь их обновляет. Есть две секции метражом: одна с готовой отделкой (внутренние помещения первого и второго этажей) и незавершенная (гараж и крытые веранды). Цель состоит в том, чтобы их можно было вводить динамически, а затем для каждого из них будет отображаться общая сумма, а затем общая сумма.
Однако у меня нет опыта работы с Javascript, и я обнаружил, что происходит своего рода перетягивание каната между сбором всех необходимых входных данных и попыткой добавить прослушиватель событий. Я просто знаю, что упускаю что-то очевидное. Конечно, я мог бы создать переменные для каждого отдельного ввода, а затем добавить их все, но это ужасно неуклюже, и я отказываюсь верить, что лучшие программисты не нашли решения для подобных ситуаций.
Вот соответствующий HTML. Это немного сумбурно, но повторюсь, я нуб. Пожалуйста, не смейтесь надо мной слишком сильно. Обратите внимание, что установленные значения являются всего лишь тестовыми значениями и в конечном коде будут начинаться с 0:

Код: Выделить всё

Square Footage Statistics:


Location
Square Feet
Previous Sq Feet
Notes



First Floor:



Second Floor:



Total Finished Sq Feet:




Garage:



Covered Front Porch:



Covered Back Porch:



Covered Side Porch:



Total Unfinished Sq Feet:



Grand Total Sq Feet:

А вот и работающий Javascript, который, очевидно, представляет собой полный беспорядок:

Код: Выделить всё

let finished = document.querySelectorAll(".fin");
let unfinished = document.querySelectorAll(".unfin");
let findiv = document.getElementById("fsqfeet");
let finTotal = 0;
let unfinTotal = 0;

findiv.addEventListener("change", function() {
finished = document.querySelectorAll(".fin");
for (let fin of finished) {
console.log(Number(fin.value));
finTotal += Number(fin.value);
}
});

Обратите внимание, что код работает, если я удалю «finddiv.addEventListener...» из обертки вокруг него. Но без этого код не изменится, когда пользователь введет новые значения. Также обратите внимание, что я пробовал код только для готового материала, но мне понадобится то же решение и для незавершенного материала.
Итак....что мне делать? Должен ли я продолжать использовать addEventListener или сделать что-то еще?

Подробнее здесь: https://stackoverflow.com/questions/798 ... en-input-i