내 부트 캠프에서 학생들과 함께 일하면서 나는 몇몇 학생들이 한 가지 문제인 타이밍을 탐색하도록 도왔습니다.

특히 처음에는 명확하지 않은 것이 있습니다.

https://flaviocopes.com/dom-timing/ 

DOM 요소의 값에 액세스하여 변수에 저장하면 DOM 요소가 변경 될 때 해당 변수가 새 값으로 업데이트 되지 않습니다.

<input id = "temperature"> 형식의 입력 필드가 있고 다음과 같은 방식으로 값을 얻는다고 가정하십시오.

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

온도 변수는 브라우저가 이 명령문을 실행하는 순간 입력 필드의 상태 값을 가져오고 값은 동일하게 유지됩니다.

이것이 당신이 이렇게 할 수 없는 이유입니다 :

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
})