Problème de closure ?

Marsh Posté le 20-07-2007 à 12:05:56

Bonjour à tous. J'ai un petit problème de Javascript et je suppose que cela a à voir avec les closures (j'ai lu quelques trucs dessus, mais j'avoue ne pas avoir tout compris).
J'ai une liste de lien comme ça:

Code :

<ul><li>
<h3>general</h3>
<ul id="general">
<li><a href="http://developer.mozilla.org/fr/docs/accueil">mdc - accueil</a></li>
<li><a href="http://developer.mozilla.org/">mdc - main page</a></li>
<li><a href="http://www.alsacreations.com/articles/">alsacréations</a></li>
<li><a href="http://www.devguru.com/home.asp">devguru home</a></li>
<li><a href="http://openweb.eu.org/xhtml/">openweb.eu.org - le xhtml</a></li>
<li><a href="http://www.thinkvitamin.com/">vitamin - a resource for web developers, designers and entrepreneurs</a></li>
<li><a href="http://www.w3schools.com/">w3schools</a></li>
</ul>
</li>
<li>
<h3>css</h3>
<ul id="css">
<li><a href="http://colormixers.com/mixers/cmr/">colormixers</a></li>
<li><a href="http://www.ilovejackdaniels.com/css/">css - ilovejackdaniels.com</a></li>
<li><a href="http://www.satzansatz.de/cssd/onhavinglayout.html">on having layout - the concept of haslayout in ie/win</a></li>
<li><a href="http://pompage.net/pompe/csspratique/">pompage - techniques et astuces pratiques pour une mise en page css</a></li>
<li><a href="http://typetester.maratz.com/">typetester - compare fonts for the screen</a></li>
<li>
<h4>lists</h4>
<ul id="list">
<li><a href="http://css.maxdesign.com.au/listamatic/">listamatic</a></li>
<li><a href="http://developer.mozilla.org/fr/docs/indentation_homog%c3%a8ne_des_listes">mdc - indentation homogène des listes</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Le but est de pouvoir les plier/déplier en cliquant sur le titre de la rubrique (h3 ou h4)
j'ai donc la portion de code suivante :

Code :

function folderize() {
var els = new Array('h3', 'h4');
for (var i=0, len=els.length; i<len; i++) {
var elm = document.getElementsByTagName(els[i]);
for (var j=0, lengh=elm.length; j<lengh; j++) {
var n = elm[j].innerHTML;
elm[j].addEventListener('click', function() {
alert(n);
}, false);
}
}
}
window.onload = folderize;

Pour l'instant, j'aimerais afficher le nom de la rubrique en cliquant dessus. Seulement, à chaque fois, c'est le nom de la toute dernière rubrique qui s'affiche.
Quelqu'un pourrait il me donner des explications ?
Merci d'avance

Message cité 1 fois
Message édité par Pato el canardo le 20-07-2007 à 12:06:36

Reply

Marsh Posté le 20-07-2007 à 12:05:56

Reply

Marsh Posté le 20-07-2007 à 12:18:59

Pato el canardo a écrit :

Quelqu'un pourrait il me donner des explications ?

Oui. Dans ta closure tu fais référence à "n" ; or n change à chaque passage de ta boucle : à la fin, il contient le dernier innerHtml. Toutes tes closures font référence au même "n", donc à chaque fois que tu cliques ça affiche la dernière rubrique.

Personnellement j'utiliserais plutôt quelque chose dans le genre (attention c'est juste un exemple, y'a des hacks à faire pour récupérer le target d'un evenement correctement avecIE) :

Code :

elm[j].addEventListener('click', function(e) {
alert(e.target.innerHTML);
}, false);

---------------
When it's from Finland it's good. - Mon blog

Reply

Marsh Posté le 20-07-2007 à 13:02:03

moi j'utiliserais this, ce qui fonctionnerait avec ie et ff

Code :

elm[j].addEventListener('click', function(e) {
alert(this.innerHTML);
}, false);

Reply

Marsh Posté le 20-07-2007 à 13:06:53

merci beaucoup à tous les deux :jap:

Reply

Marsh Posté le 20-07-2007 à 13:38:38

je reviens à la charge, car cela ne fonctionne pas sous IE
voilà le code actuel:

Code :

function folderize() {
var els = new Array('h3', 'h4');
for (var i=0, len=els.length; i<len; i++) {
var elm = document.getElementsByTagName(els[i]);
for (var j=0, lengh=elm.length; j<lengh; j++) {
elm[j].style.cursor = 'pointer';
if (elm[j].addEventListener){
elm[j].addEventListener('click', function(e) {
alert(this.innerHTML);
},
false);
} else if (elm[j].attachEvent) {
elm[j].attachEvent('onclick', function(e) {
alert(this.innerHTML);
});
}
}
}
}

FF me retourne bien le nom de la rubrique, mais IE me retourne 'undefined' ...

Reply

Marsh Posté le 20-07-2007 à 13:47:55

tu as d'autres handlers sur ton event click pour tes elms?
Si c'est pas le cas, tu peux simplifier tout ça en faisant:

Code :

for (var j=0, lengh=elm.length; j<lengh; j++) {
elm[j].style.cursor = 'pointer';
elm[j].onclick = function (){
alert(this.innerHTML);
}
}

Qui marchera sous IE et FF.

Message édité par anapajari le 20-07-2007 à 13:48:12

Reply

Marsh Posté le 20-07-2007 à 13:51:24

Merci :jap:
cela fonctionne sous les deux navigateurs.
Sais tu pourquoi mon code précédent ne fonctionnait pas ?

Reply

Marsh Posté le 20-07-2007 à 13:58:58

A cause de c'est qu'expliquait cgo2
attachEvent fonctionne bizarrement, du coup le this ne represente pas l'objet sur lequel l'evenement a eu lieu. Il faut le récupérer via event.srcElement.
Donc ça pouvais pas marcher à cause de this ( et donc oui ma 1ere réponse était pas terrible )

Message cité 1 fois

Reply

Marsh Posté le 20-07-2007 à 14:48:39

ok, je ne suis pas certain d'avoir plus compris qu'auparavant. En tous cas, merci pour l'explication :jap:

Reply

Marsh Posté le 21-07-2007 à 12:29:31

anapajari a écrit :

A cause de c'est qu'expliquait cgo2
attachEvent fonctionne bizarrement, du coup le this ne represente pas l'objet sur lequel l'evenement a eu lieu. Il faut le récupérer via event.srcElement.
Donc ça pouvais pas marcher à cause de this ( et donc oui ma 1ere réponse était pas terrible )

Tu es mauvais, tu es mauvais hein, ne change rien .

Ca te dirais de faire du HTML/CSS/JS dans une team de warriors ? [:cupra]

Message édité par gatsu35 le 21-07-2007 à 12:29:39

Reply

Problème de closure ?

Sujets relatifs:

Leave a Replay