DOMを使用する際のタイミングの重要性

私のブートキャンプで生徒たちと一緒に仕事をしている間、私は彼らの何人かが1つの問題、つまりタイミングをナビゲートするのを手伝いました。

特に、最初はわからないことが1つあります。

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チュートリアル: