Как на чистом JS отслеживать сразу 4 инпута?

Question

[DTHRT]

Есть форма в которой можно указать опыт работы. Я создал <input type="hidden">, в который хочу каждый раз после изменения выделенных красным цветом инпутов - подставлять итоговое количество лет, типо сколько человек проработал в итоге в этой компании (пример: 1 год, 5 месяцев). Саму функцию я уже написал - она работает. Принимает на входе 2 даты, формата ГОД МЕСЯЦ УСТРОЙСТВА и ГОД МЕСЯЦ УВОЛЬНЕНИЯ (пример: 2015 10, 2018 01 ). Сейчас стоит задача в том, чтобы отслеживать эти 4 выделенных инпута, как-то передавать в мою функцию параметры (годы и месяцы) и затем каждый раз обновлять мой скрытый инпут (по событию change) новым значением из моей функции (она возвращает строку).

В принципе я вижу только одно решение сейчас - накинуть на все эти 4 инпута клик с этой функцией и потом результат функции как-то запихивать в мой скрытый инпут. Однако не хочется "г#внокодить", уверен, что есть более изящные решения.

P.S. Проект на чистом JS и не подразумевает использование сторонних фреймворков типо React и Vue. Нужно решение на чистом JS.

Comments

[Вадим]

Так а проблема то в чём?
В том что Вы не хотите делать 4 функции обработчика?
Ну сделайте одну, которая будет отрабатывать на каждое из этих полей, а внутри функции уже определяйте что именно пришло в функцию или без определения делать перерасчёт на основе всех полей, что, скорее всего, будет корректнее.

Answer 1

[Антон Шаманов]

document.querySelectorAll('form select').forEach(function () {
    this.addEventListener('change', function () {
          // обновить статус
    });
});

учи работу с событиями и dom

Comments

[DTHRT]

Спасибо! Совсем забыл про данный тип перебора!

Практически идеальное решение, только вместо this подставил аргумент item.

document.querySelectorAll('.hr_input_0').forEach(function (item) {
    item.addEventListener('change', function () {
        let month_in = document.querySelector('#month_in_0');
        let year_in = document.querySelector('#year_in_0');
        let month_out = document.querySelector('#month_out_0');
        let year_out = document.querySelector('#year_out_0');

        if (month_in.value) {
            console.log('True', month_in.value)
        } else {
            console.log('False', month_in.value)
        }
    });
});

Answer 2

[sinneren]

или #1
метод onChange на каждый инпут, где проверять тип инпута и запускать соответствующий метод обработчик, а в конце метод для хидден поля
или #2 отдельный метод обработчик onChange на каждый инпут, в конце него эмиттить событие new Event('eventName') и отслеживать на document этот эвент, в нем запускать ваш метод для хидден поля