Cannot set property 'innerHTML' of null

Version imprimable

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 :

Citation:

Uncaught TypeError: Cannot set property 'innerHTML' of null

Voil� la partie de mon code qui pose probl�me :

Code:

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

.../...
Code:

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 :D

08/07/2013, 15h58
Kaamo

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.
08/07/2013, 15h59
SpaceFrog

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

Code:

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 ?
08/07/2013, 16h16
MLK_05

l��l�ment est pr�sent avant l�ex�cution su script

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

Code:

<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�.
08/07/2013, 16h54
SpaceFrog

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

Citation:

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

tu dois avoir une coquille sur l'id ...
08/07/2013, 16h57
Kaamo
Citation:

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
08/07/2013, 17h18
MLK_05

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
08/07/2013, 17h28
Kaamo

Qu'est-ce qui se passe entre

Code:

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

et

Code:

compte_a_rebours.innerHTML = " .... ";

?
Peut-�tre qu'autre chose le rend null
08/07/2013, 17h49
MLK_05

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')
08/07/2013, 17h55
Kaamo

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

Code:

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();

08/07/2013, 18h34
NoSmoking

Bonjour,
une fonction et une variable ayant le m�me nom (compte_a_rebours), c'est suicidaire :zekill:
08/07/2013, 18h39
MLK_05

Oui c'est vrai lol je modifie de suite.

Ce probl�me commence � me rendre fou
09/07/2013, 08h57
SpaceFrog

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 ?
10/07/2013, 04h44
MLK_05

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. :ccool: