Многие начинающие веб-разработчики, программируя в JavaScript, не учитывают один существенный момент, а именно: необходимость синхронизации получаемых из DOM-дерева значений элементов. Ведь данная проблема является далеко не очевидной.

Когда Вы получаете доступ к значению определенного DOM-элемента, а затем сохраняете полученное значение в переменную, следует помнить, что значение переменной не изменится при изменении значения DOM-элемента.

Допустим, у Вас есть форма с полем ввода , значение которого необходимо получить:

const temperature = document.querySelector('input#temperature').value

Переменная temperature получает значение из поля ввода и остается неизменным.

Именно по этой причине делать так совершенно бессмысленно:

const temperature = document.querySelector('input#temperature').value
document.querySelector('form')
        .addEventListener('submit', event => {
  // отправляем значение переменной temperature на сервер
})

Правильный путь - получать значение переменной temperature из поля ввода при отправке данных формы:

document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = document.querySelector('input#temperature').value
  // отправляем значение переменной temperature на сервер
})

Так же, можно сохранить ссылку на поле ввода в переменную и обращаться к ней при отправке данных формы:

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = temperatureElement.value
  // отправляем значение переменной temperature на сервер
})

Спасибо за внимание.