Вместо click'а у кнопки обрабатывайте input у формы:
- document.querySelector('.calculate').addEventListener('click', function () {
+ document.querySelector('form').addEventListener('input', function () {
UPD. Сам обработчик - как-то не круто всё выглядит:
let select = document.querySelector('select').selectedIndex;
let selectValue = select + 1; // selectedIndex считается с 0, поэтому +1
Зачем индекс? У option'ов указаны value, так что можно смотреть значение select'а.
let dateStart = document.querySelector('.start_date').value;
let dateEnd = document.querySelector('.end_date').value;
Ради получения значений нет необходимости искать элементы - ссылки на них есть в свойстве elements формы, в качестве ключа выступают значения атрибутов id и name. Также можно создать FormData, и доставать нужное уже оттуда.
let out_3 = document.querySelector('.out_3');
Аналогично - искать элемент не надо, ссылка на output внутри него есть в elements формы.
for (let i = dateStart; i <= dateEnd; i = i + 24 * 60 * 60 * 1000) {
Цикл не нужен. Вычитаем одну дату из другой, делим на количество миллисекунд в дне, получаем таким образом количество дней.
Исправляем:
document.querySelector('form').addEventListener('input', function() {
const { elements } = this;
const data = new FormData(this);
const keys = [ 'enterDate', 'outDate', 'countRooms', 'prepayment' ];
const basePayment = 2000;
const [ enter, out, rooms, prepayment ] = keys.map(k => data.get(k) /* или elements[k].value */);
const days = enter && out && enter < out
? (new Date(out) - new Date(enter)) / (24 * 60 * 60 * 1000)
: 0;
elements.payment.textContent = `${basePayment * days * rooms - prepayment} р`;
});
