Важность тайминга при работе с DOM

Работая со студентами в своем учебном лагере, я помог некоторым из них решить одну проблему: время.

В частности, есть одна вещь, которая поначалу может быть не очевидна.

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

Предположим, у вас есть поле ввода в форме<input id="temperature">, и вы получите его значение таким образом:

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

Вtemperatureпеременная получает значение состояния поля ввода в момент выполнения браузером этого оператора, а затем значение остается неизменным навсегда.

Вот почему нельзя так поступать:

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

document.querySelector(‘form’) .addEventListener(‘submit’, event => { //send the temperature value to your server })

но вам нужно получить доступ к значению температуры при отправке формы:

document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = document.querySelector('input#temperature').value
  //send the temperature value to your server
})

В качестве альтернативы вы можете сохранить поле вводассылкав переменной и используйте это для доступа к ее значению при отправке:

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = temperatureElement.value
  //send the temperature value to your server
})

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: