TypeError: document.querySelector() is null

Version imprimable

Bonjour
je viens de tester le querySelector pour detecter un evenement sur mon champ
je vous donne le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Exercice JS</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <form action="#" id="form"> <input type="text" id="cp"> <input type="submit" value="Envoyer"> </form> </body> </html>
dans mon code javascript
je fait ceci
Code:

1 2 3 4 5 6 7 document.querySelector('#form').addEventListener('submit', function(e){ var cp=document.querySelector('#cp'); if (cp.Value.length!= 5){ alert('le code est icorrect '); } } )
sauf que dans la console ca me donne

Citation:

TypeError: document.querySelector(...) is null

pouvez vous m'expliquer pourquoi ca ne marche pas ??

Salut,

L'erreur signifie que le <form> n'existe pas encore pour l'attacher à un événement, parce que le script est chargé avant le html.
Solution :

Code:

1
2
3
4
5
6
7
8
9
10
 
document.addEventListener("DOMContentLoaded", function() {//quand le document est prêt 
      document.querySelector('#form').addEventListener('submit', function(e){ 
         var cp=document.querySelector('#cp');
           if (cp.value.length!= 5){//ici c'est value et pas Value
	      alert('le code est icorrect ');
           }
      });
      /* si tu veux attacher d'autres événements, c'est ici que tu dois les mettre... */
});

08/08/2019, 17h03
Doksuri
le plus simple est de deplacer l'appel a ton script juste avant la fermeture du body
Code:

1 2 3 .....ton html.... <script type="text/javascript" src="script.js"></script> </body>
et si tu veux ajouter une securite, ajoute l'attribut defer a ta balise script developer.mozilla.org/fr/docs/Web/HTML/Element/script