[Résolu] querySelector() Renvoie systématiquement null par EmmanuelPinglier - page 1

Bonjour à tous,

Je me rechigne d'habitude à poster ce genre de questions mais je m'arrache les cheveux depuis trop longtemps sur ce problème trivial - sachant que je suis assez débutant en javascript -

Dans le code suivant, la console de débug me dit que mes variables txt et btn sont null, il y a donc un problème dans mon utilisation du querySelector, mais je n'arrive pas à comprendre lequel

merci de votre aide !

<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>Resultat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

var btn = document.querySelector('input');
var txt = document.querySelector('.test');
console.log(txt.textContent);

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.value === 'Démarrer la machine') {
    btn.value = 'Arrêter la machine';
    txt.textContent = 'La machine est démarrée !';
  } else {
    btn.value = 'Démarrer la machine';
    txt.textContent = 'La machine est arrêtée.';
  }
}

</script>
</head>

<body>

<form> 
  <input class="bouton" type="button" value="Démarrer la machine">
</form>
<p class="test">La machine est arrêtée.</p>


</body>
</document>

EmmanuelPinglier

3 juillet 2019 à 12:41:00

Anonyme

3 juillet 2019 à 13:18:26

Les scripts n'ont accès qu'au DOM déjà construit. Si ton script n'attend pas l'événement DOMContentLoaded et s'exécute avant le parsing des éléments concernés alors ils seront inaccessibles.

4 juillet 2019 à 4:22:37

Oh oui incroyable ! J'aurais pu passer encore un temps infini sans penser à ça

Merci !

querySelector() Renvoie systématiquement null

Supprimer

Modérer

Signaler le message aux modérateurs