L'importance du timing lorsque vous travaillez avec le DOM

En travaillant avec les étudiants de mon bootcamp, j'ai aidé quelques-uns d'entre eux à résoudre un problème: le timing.

En particulier, il y a une chose qui pourrait ne pas être apparente au début.

Lorsque vous accédez à la valeur d'un élément DOM et que vous le stockez dans une variable, cette variable estNE PASva être mis à jour avec la nouvelle valeur lorsque l'élément DOM change.

Supposons que vous ayez un champ de saisie dans un formulaire<input id="temperature">, et vous obtenez sa valeur de cette manière:

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

Letemperaturevariable obtient la valeur de l'état du champ d'entrée au moment où le navigateur exécute cette instruction, puis la valeur reste la même pour toujours.

C'est pourquoi vous ne pouvez pas faire comme ça:

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

document.querySelector(‘form’) .addEventListener(‘submit’, event => { //send the temperature value to your server })

mais vous devez accéder à la valeur de température lorsque vous soumettez le formulaire:

document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = document.querySelector('input#temperature').value
  //send the temperature value to your server
})

Vous pouvez également stocker le champ de saisieréférencedans une variable, et utilisez-la pour accéder à sa valeur lors de la soumission:

const temperatureElement = document.querySelector('input#temperature')
document.querySelector('form')
        .addEventListener('submit', event => {
  const temperature = temperatureElement.value
  //send the temperature value to your server
})

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: