Erreur : cette variable est null

Version imprimable

01/01/2011, 09h25
chok371

Erreur : cette variable est null
Bonjour,

J'essaie d'accéder aux images de la div #simpleBOX :
Code:

1 2 3 4 var cibleDiv = document.getElementById("simpleBOX"); var cibleImg = cibleDiv.getElementByTagName("img"); cibleImg.addEventListener(click, openBOX, false);
Mais dans firebug j'ai un message d'erreur, il me dit qu'au niveau de la deuxième ligne, cibleDiv is null

Code:

1
2
3
4
5
6
7
8
9
 
var cibleDiv = document.getElementById("simpleBOX");
 
var cibleImg = cibleDiv.getElementByTagName("img");
 
 for (var i = 0; i<= cibleImg.length; i++){
cibleImg[i].addEventListener(click, openBOX, false);
 
}

01/01/2011, 11h33
chok371

Merci, mais il y a toujours la même erreur.

il faudrait mettre une alert pour voir ce que retourne cibleImg.length

Code:

1
2
3
4
5
6
7
8
9
var cibleDiv = document.getElementById("simpleBOX");
 
var cibleImg = cibleDiv.getElementByTagName("img");
alert(cibleImg.length)
 for (var i = 0; i<= cibleImg.length; i++){
cibleImg[i].addEventListener(click, openBOX, false);
 
}

01/01/2011, 11h50
Invité

et je vient de remarquer

il manque un s a getElementsByTagName

je sais pas pourquoi mais c'est frequent comme erreur
01/01/2011, 12h16
chok371

Le alert, bizarrement, ne marche pas.

J'ai mis le "s" et il y a toujours la même erreur.

le probleme doit donc etre en amont

et une alert pour ciblediv sa donne quoi

Code:

1
2
3
4
5
6
7
8
9
10
 
 
var cibleDiv = document.getElementById("simpleBOX");
 alert( cibleDiv)
var cibleImg = cibleDiv.getElementByTagName("img");
 
 for (var i = 0; i<= cibleImg.length; i++){
cibleImg[i].addEventListener(click, openBOX, false);
 
}

01/01/2011, 12h41
chok371

ça donne null
01/01/2011, 12h48
Invité

il faut en conclure que document.getElementById("simpleBOX") n'existe pas

peut etre une erreur de syntaxe sur l'id
01/01/2011, 14h35
chok371

Non il y a bien un div id#simpleBox.

Voici le script complet : http://dl.free.fr/r8HzN43Bp

Peut-être que tu trouveras mieux l'erreur.
01/01/2011, 14h47
danielhagnoul

Bonjour

Citation:

Envoyé par chok371

Non il y a bien un div id#simpleBox.

Code:

var cibleDiv = document.getElementById("simpleBOX");

simpleBOX n'est pas identique à simpleBox !

Désolé j'ai pas été assez précis : dans ma div c'est bien simpleBOX :

Code:

1
2
3
4
5
6
<div id="simpleBOX">
	<img src="img/img-simpleBOX/small/desert.jpg" width="200" height="200" alt="Désert" /> 
	<img src="img/img-simpleBOX/small/meduse.jpg" width="200" height="200" alt="Méduse" />
	<img src="img/img-simpleBOX/small/koala.jpg" width="200" height="200" alt="Koala" />
	<img src="img/img-simpleBOX/small/fleur.jpg" width="200" height="200" alt="Fleur" />
</div>

finalement il y a beaucoup d'erreur

la fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function evenement() {
var cibleDiv = document.getElementById("simpleBOX");
var cibleImg = cibleDiv.getElementsByTagName("img");
 
 for (var i = 0; i<= cibleImg.length; i++){
cibleImg[i].addEventListener('click', openBOX, false);
 
}
 
}
 
function openBOX(small, original) {
 
alert('coucou')
 
}

dans le fichier html rajoute l'appel a la fonction

Code:

1
2
 
<body onload='evenement()'>

01/01/2011, 17h52
chok371

Merci, cette fois ça marche.

Mais j'aimerais avoir un peu plus d'infos sur mes erreurs, car je trouve ton code un peu obscur, et ça pourrait m'aider à progresser :

- Pourquoi mettre le tout dans une fonction "evenement()" chargée par le body ?8O

- Pareil pour le boucle for, est ce qu'elle est obligatoire ?

Encore merci
01/01/2011, 18h16
Invité

Citation:

- Pourquoi mettre le tout dans une fonction "evenement()" chargée par le body ?

pour etre certain que la page est completement charge il faut lancer la fonction avec l'evenement onload afin de pouvoitr faire les traitement sur les elements de la pge

Citation:

Pareil pour le boucle for, est ce qu'elle est obligatoire

la boucle sert a parcourir chaque elements

cibleDiv.getElementsByTagName("img") c'est un tableau qui contient une reference a chaque elements
01/01/2011, 18h21
chok371

Citation:

pour etre certain que la page est completement charge il faut lancer la fonction avec l'evenement onload afin de pouvoitr faire les traitement sur les elements de la pge

Ok c'est donc toujours obligatoire ? car perso j'ai déjà vu des scripts fonctionnés sans cette technique

Citation:

cibleDiv.getElementsByTagName("img") c'est un tableau qui contient une reference a chaque elements

Ok merci
02/01/2011, 10h10
dukej

Code:

i<= cibleImg.length

devrait s'écrire :

Code:

i< cibleImg.length

car sinon on essaye d'accéder à l'élément cibleImg[cibleImg.length] sachant que le dernier élément d'un tableau est cibleImg.length-1, il faut utiliser la condition strictement inférieur, et non inférieur ou égal

Fuseau horaire GMT +2. Il est actuellement 05h16.