在與我的編程訓練班學生一起工作時,我幫助了其中一些人解決了一個問題:時間。

特別是,有一件事起初可能並不明顯。

當您存取 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 => {
 //將溫度值發送到服務器
})

而您需要在提交表單時訪問溫度值:

document.querySelector('form')
 .addEventListener('submit', event => {
 const temperature = document.querySelector('input#temperature').value
 //將溫度值發送到服務器
})

或者,您可以將輸入字段的 引用 存儲在變量中,然後在提交表單時使用它來訪問其值:

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
 .addEventListener('submit', event => {
 const temperature = temperatureElement.value
 //將溫度值發送到服務器
})