11480 sujets

JavaScript, DOM et API Web HTML5

Hello,

Je souhaite ajouter dynamiquement des attributs onclick à certains div dans ma page web.
J'ai trouvé cette solution pour le problème du setAttribute sous IE (http://www.nanoum.net/blog/9_setAttribute.html) pour IE, mais je ne vois pas comment passer correctement des variables à la fonction attribuée à mon onclick.

Pour être clair:
Sous FF, je fait

for (var i = 0; i < items.length; i ++) {
elem = document.createElement('INPUT');
elem.setAttribute('type','checkbox');
elem.setAttribute('onclick','javascript:fooBar('+i+'))
}

Sous IE, je dois remplacer ma dernière ligne par

elem.onclick = function() { foobar(i); };

Truc etrange, mon i a toujours la même valeur, à savoir celle qu'il obtient par la dernière boucle.

Comment faire pour reproduire le comportement attendu (celui de FF) sous IE ?

Merci
Utiliser le setATtribute pour le onclick est fondamentalement une erreur puisqu'il ne s'agit pas d'un attribut à proprement parler : c'est un pointeur vers une fonction javascript.

Concernant le bug de la variable i, ça peut s'expliquer assez facilement.
Tu crées une fonction qui sera appelée ultérieurement, bien après la boucle for. Ainsi en sortie de boucle, i conserve sa dernière valeur. Logique, me diras-tu. Là où il y a l'erreur, c'est que le code de la fonction ne sera évalué qu'au moment où elle sera appelée. Tu devineras aisément la suite...

Une alternative serait peut-être celel d'utiliser le constructeur de fonction anonymes, c'est-à-dire new Function(arguments, code) les deux paramètres sont à passer sous forme de chaînes de caractères.

Maintenant, pourquoi le bug n'intervient pas avec firefox : Tu attribues une chaîne de caractères. De ce fait, la variable i est immédiatement remplacée par sa valeur, pendant l'exécution de la boucle.
Modifié par QuentinC (10 May 2006 - 19:33)
comme dans toutes les boucles où tu récupères l'indice pour le passer à une fonction, il te faut créer un attribut arbitraire pour chaque objet de la boucle;

for(i=0; i != max; i++){
elem = document.createElement("input");
elem.indice= parseInt(i);
elem.onclick=function(){go(this.ind)}
}