créer des fonctions dans des boucles

[aku84]

Bonjour, j'écris car j'ai un problème pour définir des fonction dans des boucles, comme on peu le voir dans le code ci dessous, je voudrai créer u certain nombre de div qui m'affiche leur numero quand je clique dessus. Comme on le voit ci dessous, je fais 200 div mais lorsque je clique sur ces div j'ai toujours 200 qui s'affiche c'est à dire la dernière valeur de i plus 1

Code :

1
2
3
4
5
6
7
8
9
10
11
for (i=1;i<200;i++) {
 
	var parz = document.getElementById('divstrok');
	var xxz = document.createElement("div");
	xxz.setAttribute("Style","position:absolute; top:100px; width:18px; height:18px; background-color:#000000; color:#FFFFFF;");
	xxz.id = 'a'+i;
	xxz.onclick = function() {alert(i)};
	xxz.style.left = 21*i+8+'px';
	parz.appendChild(xxz);
 
}

Alors j'aimerai savoir si quelqu'un pourrai me dire comment faire pour avoir le 1 qui s'affiche pour la premiere div, le 2 pour la deuxieme, ect ... ?

J'ai essayé beaucoup de méthodes différentes mais rien ne marche :/

Merci

[RomainVALERI]

Code :

1
2
3
4
5
6
7
8
9
10
var i, nouveau, parent = document.getElementById('divstrok');
for (i = 1; i < 200; i++) {
   nouveau = document.createElement("DIV");
   nouveau.setAttribute("Style","position:absolute; top:100px; width:18px; height:18px; background-color:#000000; color:#FFFFFF;");
   nouveau.id = 'a'+i;
   nouveau.indice = i;
   nouveau.onclick = function() {alert(this.indice)};
   nouveau.style.left = ((21 * i) + 8) + 'px';
   parent.appendChild(nouveau);
}

Entre autres optimisations mineures (déclarations en dehors de la boucle, nommage, etc.), le problème était que tu ne faisais que référencer une variable i, globale par défaut de déclaration (var), dont chaque div affichait la valeur au moment du clic.
En créant une propriété à chaque div nouvellement créée et en lui assignant la valeur courante de i, on laisse i évoluer indépendamment de cette propriété.

[aku84]

c'est exactement ce que je cherchais je ne savais pas qu'on pouvait ajouter un champ comme vous l'avez fais pour 'indice'

Merci beaucoup

[NoSmoking]

Bonsoir,
il existe Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?, une mine d'informations

mais je vais me permettre 2 remarques

1/ faire

Code :

nouveau.setAttribute("Style","position:absolute; top:100px; width:18px; height:18px; background-color:#000000; color:#FFFFFF;");

n'est pas judicieux, il vaut mieux passer par une classe

Code css :

1
2
3
4
5
6
7
8
.newdiv {
  position : absolute;
  top : 100px;
  width : 18px;
  height : 18px;
  background-color : #000000;
  color : #FFFFFF;
}

2/ concernant le nommage des variables, autant mettre comme l'a fait RomainVALERI des noms qui parlent, sauf que concernant la variable parent elle bug sous Opera si mes souvenirs sont bons, et il le sont , je viens de retester...

donc au final

Code :

1
2
3
4
5
6
7
8
9
10
11
var i, nouveau, oParent = document.getElementById('divstrok');
for (i = 1; i < 200; i++) {
   nouveau = document.createElement("div");
   nouveau.className = "newdiv";
//   nouveau.setAttribute("style","position:absolute; top:100px; width:18px; height:18px; background-color:#000000; color:#FFFFFF;");
   nouveau.id = 'a'+i;
   nouveau.indice = i;
   nouveau.onclick = function() {alert(this.indice)};
   nouveau.style.left = (21 * i) + 8 + 'px';
   oParent.appendChild(nouveau);
}

[RomainVALERI]

J'ai eu un doute pour parent

Merci pour ces excellentes précisions

(d'ailleurs pour terminer le boulot, on peut ajouter la propriété left dans la liste des propriétés de style ^^)

[dukej]

Envoyé par RomainVALERI

J'ai eu un doute pour parent

Merci pour ces excellentes précisions

(d'ailleurs pour terminer le boulot, on peut ajouter la propriété left dans la liste des propriétés de style ^^)

La solution la plus propre est de passer par une fonction qui retourne une fonction.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
for (i=1;i<200;i++) {
 
	var parz = document.getElementById('divstrok');
	var xxz = document.createElement("div");
	xxz.setAttribute("Style","position:absolute; top:100px; width:18px; height:18px; background-color:#000000; color:#FFFFFF;");
	xxz.id = 'a'+i;
	xxz.onclick = (function(index) {
             return function() {alert(index)}; 
        })(i);
	xxz.style.left = 21*i+8+'px';
	parz.appendChild(xxz);
 
}

[RomainVALERI]

Envoyé par dukej

La solution la plus propre

C'est pour éviter de rajouter une propriété à l'objet ? En terme de performance ?
Si jamais cette donnée est utile pour quoi que ce soit d'autre (ce qui est quand même probable...) il vaudra mieux avoir isolé cette donnée à un endroit pratique à accéder... non ?

...et pour ta modification, tu aurais pu repartir de la version la plus récente parce que là du coup on repart en arrière (m'enfin bref je pense que aku84 saura adapter le principe à son code ^^)

[dukej]

Envoyé par RomainVALERI

C'est pour éviter de rajouter une propriété à l'objet ? En terme de performance ?
Si jamais cette donnée est utile pour quoi que ce soit d'autre (ce qui est quand même probable...) il vaudra mieux avoir isolé cette donnée à un endroit pratique à accéder... non ?

...et pour ta modification, tu aurais pu repartir de la version la plus récente parce que là du coup on repart en arrière (m'enfin bref je pense que aku84 saura adapter le principe à son code ^^)

Le but étant dans le cas présent de ne pas modifier l'objet c'est pour ça que je passe par une fonction qui en créé une autre.

[aku84]

pour le problème avec opera je n'ai pas eu directement celui dont vous avez parlé avec la variable parent car je n'ai pas utilisé ce nom mais je l'ai lorsque j'utilise une librairie javascript (raphael js) , il ya des elements qui ne s'affichent pas du tout seulement avec opera

[javatwister]

Code :

d'accord avec la soluce de NoSmoking: plus simple ou plus compliqué tu meurs (d'ailleurs, Fumer tue)

[NoSmoking]

dans l'exemple fourni, si l'information pertinente est contenue dans l'ID, on peut se passer d'ajouter une propriété à l'élément

Code :

1
2
3
4
5
6
7
8
9
10
11
12
var i, nouveau, oParent = document.getElementById('divstrok');
for (i = 1; i < 200; i++) {
   nouveau = document.createElement("div");
   nouveau.className = "newdiv";
   nouveau.id = 'a'+i;
   // nouveau.indice = i;
   nouveau.onclick = function() {
     alert( this.id.replace('a',''));
   };
   nouveau.style.left = (21 * i) + 8 + 'px';
   oParent.appendChild(nouveau);
}

[RomainVALERI]

Envoyé par NoSmoking

dans l'exemple fourni, si l'information pertinente est contenue dans l'ID, on peut se passer d'ajouter une propriété à l'élément

Oui, en effet, c'est ce que je fais souvent mais je me suis dit que pour aku84 ça allait "compliquer" la récupération de ce nombre à chaque fois...

Mais à part ça en ce qui me concerne je n'ai toujours pas bien saisi la pertinence de l'opération : pourquoi éviter de rajouter une propriété à l'objet ? pour la performance (temps de traitement du code JS) la compatibilité ? la maintenabilité ?

[NoSmoking]

Envoyé par RomainVALERI

Mais à part ça en ce qui me concerne je n'ai toujours pas bien saisi la pertinence de l'opération : pourquoi éviter de rajouter une propriété à l'objet ? pour la performance (temps de traitement du code JS) la compatibilité ? la maintenabilité ?

j'aurais tendance à dire qu'une propriété de plus ou de moins, au vue de ce que rajoutes les navigateurs, n'est pas répréhensible.

- Dans le cas d'un variable que l'on n'utilise en fait que comme constante passée à une fonction, je ne surcharge pas l'objet, et encore la surcharge étant tellement facile à mettre en oeuvre que...
- Dans le cas d'une variable "dynamique", je surcharge l'objet, exemple pour la comptabilité du nombre de click sur un élément.

Question performance alors là ?????????????????????

[Watilin]

Il y a un risque de fuite de mémoire sous IE, quand un objet du DOM et un objet « normal », non DOM, se référencent mutuellement. IE utilise deux ramasse-miettes, un pour le DOM et un pour le JS pur, et il semble qu'ils ne sachent pas communiquer entre eux pour résoudre les références circulaires.

Cela dit, j'ai essayé plusieurs fois de reproduire le problème et j'ai jamais réussi

À cause de ce problème, on trouve souvent sur le Net des gens qui conseillent d'éviter purement et simplement tout ajout d'attribut sur un objet DOM. Disons que c'est… Une fausse rumeur qui a la vie dure Il suffit d'être au courant des risques et de savoir ce qu'on fait. Avec les types primitifs comme les nombres, les chaînes et les booléens, aucun souci !

[RomainVALERI]

Envoyé par Watilin

Il y a un risque de fuite de mémoire sous IE, quand un objet du DOM et un objet « normal », non DOM, se référencent mutuellement. IE utilise deux ramasse-miettes, un pour le DOM et un pour le JS pur, et il semble qu'ils ne sachent pas communiquer entre eux pour résoudre les références circulaires.

Cela dit, j'ai essayé plusieurs fois de reproduire le problème et j'ai jamais réussi

À cause de ce problème, on trouve souvent sur le Net des gens qui conseillent d'éviter purement et simplement tout ajout d'attribut sur un objet DOM. Disons que c'est… Une fausse rumeur qui a la vie dure Il suffit d'être au courant des risques et de savoir ce qu'on fait. Avec les types primitifs comme les nombres, les chaînes et les booléens, aucun souci !

Autant je n'aime pas les dictons, autant là on jette le bébé avec l'eau du bain !