Cannot set property 'innerHTML' of null

**MLK_05** · 08/07/2013, 15h42

Bonjour tout le monde,

Voilà j'ai un problème avec mon code JS.
J'ai fait un compte à rebours, tout marche bien sauf que sur tous les navigateurs ont me signal qu'il y a un problème :

Uncaught TypeError: Cannot set property 'innerHTML' of null

Voilà la partie de mon code qui pose problème :

Code :

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

var compte_a_rebours = document.getElementById('countdown');

.../...

Code :

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

1
2
3
4
5
compte_a_rebours.innerHTML = "<div id='div1'><div id='div2'>" +
	"<div id='div3'>" + jours + "<br/><span class='span_countdown'>" + mot_jour + 
	"</span></div><div id='div4'>" + heures + "<br/><span class='span_countdown'>" + mot_heure + 
	"</span></div><div id='div5'>" + minutes + "<br/><span class='span_countdown'>" + mot_minute + 
	"</span></div><div id='div6'>" + secondes + "<br/><span class='span_countdown'>" + mot_seconde + "</span></div></div></div>";

Merci pour votre aide

**Kaamo** · 08/07/2013, 15h58

Cela veut dire que ta page ne contient pas d'élément ayant pour id "countdown". Si cet élément est bel et bien présent, vérifie que le document est prêt avant d'exécuter le Javascript.

**SpaceFrog** · 08/07/2013, 15h59

a quel moment cette ligne est elle interprétée ?

Code :

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

var compte_a_rebours = document.getElementById('countdown');

sans doute avant que l'objet ne soit instancié ?

as tu une fonction qui se lance sur le onload de la page ?

**MLK_05** · 08/07/2013, 16h16

Ma fonction se lance par le biais de la balise <script>, juste avant la fermeture du Body :

Code html :

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

<script type="text/javascript">compte_a_rebours();</script>

ps : l'id countdown est bien présente dans mon code HTML sinon le compte à rebours n'aurait pas fonctionné.

**SpaceFrog** · 08/07/2013, 16h54

si le script est après la balise ...
c'est kaamo, qui a raison

Cela veut dire que ta page ne contient pas d'élément ayant pour id "countdown".

tu dois avoir une coquille sur l'id ...

**Kaamo** · 08/07/2013, 16h57

tu dois avoir une coquille sur l'id ...

Oui, c'est sûrement ça !
Vérifie bien que :

tu n'as pas un autre id countdown. Un id doit être unique
les balises qui doivent avoir une balise fermante associée sont correctement fermées (erreur de syntaxe HTML)
l'id countdown ne se situe pas dans une iframe sous-jacente

**MLK_05** · 08/07/2013, 17h18

Je peux vous assurer qu'après plusieurs vérifications :

- L'id est unique et qu'il n'y pas de faute
- Le script se lance après l'element ayant pour id countdown
- Toutes les balises se ferment

**Kaamo** · 08/07/2013, 17h28

Qu'est-ce qui se passe entre

Code javascript :

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

var compte_a_rebours = document.getElementById('countdown');

et

Code javascript :

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

compte_a_rebours.innerHTML = " .... ";

?
Peut-être qu'autre chose le rend null

**MLK_05** · 08/07/2013, 17h49

Il y a la mise en place des différentes variables (jour, heure,..)..

Mais je n'utilise pas compte_a_rebours ou document.getElementById('countdown')

**Kaamo** · 08/07/2013, 17h55

Je n'ai plus de pistes avec ces informations. Si possible, montre nous le code de la page dans son intégralité ?

**MLK_05** · 08/07/2013, 18h11

Code :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
function compte_a_rebours(){
 
	var compte_a_rebours = document.getElementById('countdown');
	var date_actuelle = new Date();
	var date_evenement = new Date("jul 16 23:00:00 2013");
	var total_secondes = (date_evenement - date_actuelle) / 1000;
 
	if (total_secondes > 0){
		var jours = Math.floor(total_secondes / (60 * 60 * 24));
		var heures = Math.floor((total_secondes - (jours * 60 * 60 * 24)) / (60 * 60));
		minutes = Math.floor((total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60))) / 60);
		secondes = Math.floor(total_secondes - ((jours * 60 * 60 * 24 + heures * 60 * 60 + minutes * 60)));
 
		var mot_jour = "Jours";
		var mot_heure = "Heures";
		var mot_minute = "Minutes";
		var mot_seconde = "Secondes";
 
		if (jours == 0)
		{
			jours = '0';
			mot_jour = 'Jour';
		}
		else if (jours == 1)
		{
			mot_jour = "Jour";
		}
		if (heures == 0)
		{
			heures = '0';
			mot_heure = 'Heure';
		}
		else if (heures == 1)
		{
			mot_heure = "Heure";
		}
		if (minutes == 0)
		{
			minutes = '0';
			mot_minute = 'Minute';
		}
		else if (minutes == 1)
		{
			mot_minute = "Minute";
		}
 
		if (secondes == 0)
		{
			secondes = '0';
			mot_seconde = 'Seconde';
		}
		else if (secondes == 1)
		{
			mot_seconde = "Seconde";
		}		
 
		compte_a_rebours.innerHTML ="<div id='div1'><div id='div2'>" +
									"<div id='div3'>" + jours + "<br/><span class='span_countdown'>" + mot_jour + 
									"</span></div><div id='div4'>" + heures + "<br/><span class='span_countdown'>" + mot_heure + 
									"</span></div><div id='div5'>" + minutes + "<br/><span class='span_countdown'>" + mot_minute + 
									"</span></div><div id='div6'>" + secondes + "<br/><span class='span_countdown'>" + mot_seconde + "</span></div></div></div>";
	}
 
	else
	{
		compte_a_rebours.innerHTML = "Bienvenue !";
	}
 
	var actualisation = setTimeout("compte_a_rebours();", 1000);
 
 
	var div = document.getElementById('countdown');
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");
	var div3 = document.getElementById("div3");
	var div4 = document.getElementById("div4");
	var div5 = document.getElementById("div5");
	var div6 = document.getElementById("div6");
 
	div.style.fontSize="300%";
	div.style.fontFamily="'bankgthl', 'Poiret One'";
	div.style.color="#FFF";
	div.style.border="0px solid white";
	div.style.width="100%";
	div.style.marginTop="10px";
	div.style.textAlign="center";
 
	div1.style.width="90%";
	div1.style.display="block";
	div1.style.margin="auto";
	div1.style.marginLeft="50px";
	div1.style.border="0px solid white";
 
	div2.style.Float="left";
	div2.style.marginLeft="50px";
	div2.style.border="0px solid white";
 
	div3.style.display="inline-block";
	div3.style.border="0px solid white";
	div3.style.padding="0 5px 0 5px";
 
	div4.style.display="inline-block";
	div4.style.marginLeft="50px";
	div4.style.border="0px solid white";
 
	div5.style.display="inline-block";
	div5.style.marginLeft="50px";
	div5.style.border="0px solid white";
 
	div6.style.display="inline-block";
	div6.style.marginLeft="50px";
	div6.style.border="0px solid white";
}
compte_a_rebours();

**NoSmoking** · 08/07/2013, 18h34

Bonjour,
une fonction et une variable ayant le même nom (compte_a_rebours), c'est suicidaire

**MLK_05** · 08/07/2013, 18h39

Oui c'est vrai lol je modifie de suite.

Ce problème commence à me rendre fou

**SpaceFrog** · 09/07/2013, 08h57

et tu ne nous montre pas l'intégralité de la page ...

en gros tu lances la fonction juste après l'avoir déclarée, mais ou se situe le tout par rapport à ton html ?

**MLK_05** · 10/07/2013, 04h44

Problème résolu : comme un con j'ai lancé la fonction à la fin du script (dans le .js) et du coup c'est normal qu'il ne trouvait pas l'élément avec l'id 'countdown'.
Je suis vraiment idiot --'

En tout cas merci pour votre aide.

Cannot set property 'innerHTML' of null

JavaScript

Discussions similaires

Partager

Partager