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

或者,您可以存储输入字段参考在变量中,并使用它来访问其在submit处的值:

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教程: