IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

créer des fonctions dans des boucles


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut créer des fonctions dans des boucles
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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é.

  3. #3
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut Re
    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

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    }

  5. #5
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    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 ^^)

  6. #6
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Citation Envoyé par RomainVALERI Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
     
    }

  7. #7
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation Envoyé par dukej Voir le message
    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 ^^)

  8. #8
    Inactif  

    Profil pro
    Inscrit en
    Mai 2010
    Messages
    345
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 345
    Par défaut
    Citation Envoyé par RomainVALERI Voir le message


    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.

  9. #9
    Membre averti
    Profil pro
    Ingénieur calcul
    Inscrit en
    Février 2011
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur calcul

    Informations forums :
    Inscription : Février 2011
    Messages : 47
    Par défaut
    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

  10. #10
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    }
    d'accord avec la soluce de NoSmoking: plus simple ou plus compliqué tu meurs (d'ailleurs, Fumer tue)

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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);
    }

  12. #12
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation 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é ?

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut
    Citation Envoyé par RomainVALERI Voir le message
    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à ?????????????????????

  14. #14
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 098
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 098
    Par défaut
    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 !
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  15. #15
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Citation Envoyé par Watilin Voir le message
    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 !

Discussions similaires

  1. Comment ajouter des séries dans des graphes sur des feuilles variables
    Par Molomarcopolo dans le forum Macros et VBA Excel
    Réponses: 1
    Dernier message: 06/07/2012, 16h26
  2. créer des Jlabel dans une boucle
    Par ballantine's dans le forum Débuter
    Réponses: 11
    Dernier message: 18/01/2010, 13h20
  3. [E-07] créer des variables dans une boucle ?
    Par edouardg dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 02/12/2008, 22h19
  4. Réponses: 3
    Dernier message: 15/02/2007, 09h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo