TypeError: document.querySelector() is null

**badrou** · 08/08/2019, 13h59

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

**Toufik83** · 08/08/2019, 14h57

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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... */
});

**Doksuri** · 08/08/2019, 17h03

le plus simple est de deplacer l'appel a ton script juste avant la fermeture du body

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

TypeError: document.querySelector() is null

JavaScript

Discussions similaires

Partager

Partager