在與我的編程訓練班學生一起工作時,我幫助了其中一些人解決了一個問題:時間。
特別是,有一件事起初可能並不明顯。
當您存取 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
//將溫度值發送到服務器
})