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 :

onClick ne fonctionne pas sur une affectation dynamique


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut onClick ne fonctionne pas sur une affectation dynamique
    Bonjour à tous,
    D'abord, je suis un grand débutant, j'essaie de faire ma première application en js.

    Mon objectif est de déplier (développer) un élément du DOM en sous éléments (children) lorsque je click sur cet élément parent.
    - Si je click une premiere fois sur l'élément parent (cree via une page php), je le développe en affichant des children que je créé en js.
    - Si je click sur l'élément parent une seconde fois alors qu'il est déjà déplier/développé, alors je supprime les children (je referme le dépliage)
    pour faire cela, j'ai défini une fonction "developpe" appellée dans l'attribut onClick de ma page de garde générée en php (cette fonction fait le boulot, il me semble)

    Dans mon cas, j'affiche sur la page de garde un élément "viandes". Je click dessus, ma fonction "developpe" de l'attribut onClick récupère bien le parametre "viandes" et créé les chidren: boeuf, porc, veau etc..

    Or, pour chaque chidren que j'ai créé en js j'ai également spécifié un attribut "onClick" qui fait appel à la même fonction "developpe" qui doit me permettre de développer "porc" (par exemple) en roti, cote, rouelle etc...

    Et c'est là que j'ai le probleme. Une fois les children de "viandes" créés, lorsque je click sur "porc" ma fonction "developpe" devrait prendre "porc" en parametre, mais elle me récupère systématiquement "viandes".

    Je ne parviens pas à voir où j'ai fais une boulette.

    J'ai réduit mon code au minimum pour mettre en évidence ce phénomène.

    Ma page principale se nomme index.php, elle inclue une page php categorie.php et fait appelle a developper.js qui contient le code de la fonction "developpe". Le tout est joint dans cette discussion.

    La question que je me pose est pourquoi je récupère le parametre "viandes" alors que j'ai clické sur "porc".

    Si quelqu'un pouvait jeter un coup d'oeil et me dire ce qui ne va pas cela me permettrai d'avancer.
    Merci à tous

    index.php:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
        <head>
            <!-- En-tête de la page -->
            <meta charset="utf-8" />
            <title>Le bon prix</title>
        </head>
     
        <body>
            <h1>Le bon prix</h1>
            <div>
                <?php include("./categories.php"); ?>
            </div>
            <script src="./developper.js"></script>
        </body>
    </html>


    categories.php:
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?php
    // En réalité je me connecte a une bdd mysql et je fais un select pour récupérer les 
    // catégories alimentaires: viandes, poissons, etc..
    // Ici j'ai simplifier au maximum le code
    ?>
     
        <h2 id="<?php echo 'viandes'; ?>" name="<?php echo 'viandes'; ?>" class="niveau1" onclick="developpe(<?php echo '\'viandes\''; ?>)" onmouseover="this.style.cursor='pointer';"><?php echo 'Viandes'; ?></h2>
     
    <?php
    // fin traitement requete mysql
    ?>


    developper.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function developpe(valElt) {
     
        var elt = document.getElementById(valElt);
        var eltClassName = elt.className;
        var eltChildLength = elt.childNodes.length;
     
        // Si la categorie selectionnee n'a pas d'enfants alors il faut creer les enfants
        // pour pour simuler un developpement en sous-categories de la catégorie elle-même
        if (eltChildLength <= 1) {
            var list = ['Boeuf','Porc'];
            listLength = list.length;
            for (var i = 0; i < listLength; i++) {
                var subElt = document.createElement("h3"); // Création d'un sous élément de balise "h3"
                subElt.id = list[i].toLowerCase(); // Définition de son identifiant
                subElt.name = list[i].toLowerCase();
                subElt.className = "niveau2";
                //subElt.onmouseover = 'this.style.cursor=\'pointer\';';
                subElt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
                subElt.onClick = 'developpe(' + list[i].toLowerCase() + ')';
                subElt.appendChild(document.createTextNode(list[i])); // Définition de son contenu textuel
                elt.appendChild(subElt); // Insertion du nouveau sous-élément
            }
     
            // Si la categorie selectionnee a des enfants alors il faut les supprimer
            } else {
                var children = elt.childNodes;
                for ( var i = eltChildLength - 1; i >= 1; i-- ) {
                    elt.removeChild(children[i]);
                }
     
            }
     
    }

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut


    On ne peut rien faire coté JS avec du code serveur.

    Un ID doit être unique dans la page web, je parie que ce n'est pas le cas chez vous !

    Suggestion : utilisez des classes au lieu des IDs.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut Id unique
    Bonjour,
    Merci de m'aider.
    pour ce qui me concerne, l'id est unique. C'est "viandes", "poisssons", "legumes" etc... Dans mon testcase l'id est limité à "viandes"
    A l'affichage de ma page de garde: première page, j'ai réduit les à id "viandes" donc pas de confusion possible (à mon avis).
    Lorsque j'appelle ma fonction "développe" avec "viande", pas de problème, je créé les sous-élements "boeuf" et "porc".
    Le soucis apparaît lorsque je click sur la ligne "porc" par exemple. En entrée de ma fonction "developpe" j'obtiens "viande" alors qu'il me semble avoir tout réalisé pour obtenir "porc". Et donc avoir tous les éléments pour développer "porc" (non visible dans le code fourni qui est minimaliste), or ce n'est pas le cas, j'obtiens "viande".
    En traçant avec firefox "developpement web" on voit bien que la fonction "developpe" est appelée avec l'argument "viandes" et non "porc" comme attendu.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 634
    Points : 66 650
    Points
    66 650
    Billets dans le blog
    1
    Par défaut
    On ne peut rien faire coté JS avec du code serveur.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut suppression du code serveur avec javascript
    Bonjour,
    Dans mon esprit, vous parliez de code serveur en faisant référence à "php". J'ai donc retiré la partie php et l'ai remplacée par du javascript.
    Je suis donc maintenant en pur javascript et j'ai remplacé le element.onClick par element.addEventListener avec la fonction "click" et "developpe" qui va bien (de mon point de vue).
    Je constate le même phénomène qu'auparavant. c'est à dire:
    au lancement de ma page d'accueil, j'affiche bien "viandes"
    Je peux la développer en cliquant sur l'élément "viandes" et j'obtiens les sous éléments "Boeuf" et "Porc".
    Mais dès lors que je clique sur "porc" ou "boeuf" que je devrais développer, je constate que ma fonction "developpe" recupère systématiquement le parametre "viandes" alors que je m'attends à "boeuf" ou "porc".
    Je dois faire une grosse boulette quelque part mais, bien évidemment, je ne vois pas où!
    Je vous joint un bout de code qui met en évidence le phénomène.
    Par avance, je vous remercie de votre aide.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!DOCTYPE html>
    <html>
        <head>
            <!-- En-tête de la page -->
            <meta charset="utf-8" />
            <title>Le bon prix</title>
     
        </head>
     
     
        <body>
            <h1 id="titre">Le bon prix</h1>
            <div>
     
                <script>
                    function initpage(valElt) {
                        var elt = document.createElement("h1"); // Création d'un élément de balise "h1"
                        elt.id = valElt; // Définition de son identifiant
                        elt.name = valElt;
                        subElt.className = "niveau1";
                        elt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
                        elt.innerHTML = valElt;
                        elt.addEventListener("click", function() { developpe(valElt); } );
                        document.getElementById("titre").appendChild(elt);
                
                    }
                    initpage("viandes");
                </script>
            </div>
            <script src="./developper.js"></script>
        </body>
    </html>

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    function developpe(valElt) {
        if (valElt) {
        var elt = document.getElementById(valElt);
        var eltClassName = elt.className;
        var eltChildLength = elt.childNodes.length;
     
        // Si la categorie selectionnee n'a pas d'enfants alors il faut creer les enfants
        // pour pour simuler un developpement en sous-categories de la catégorie elle-même
        if (eltChildLength <= 1) {
            var list = ['Boeuf','Porc'];
            listLength = list.length;
            for (var i = 0; i < listLength; i++) {
                var subElt = document.createElement("h3"); // Création d'un sous élément de balise "h3"
                subElt.id = list[i].toLowerCase(); // Définition de son identifiant
                subElt.name = list[i].toLowerCase();
                subElt.className = "niveau2";
                subElt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
                subElt.addEventListener("click", function() { developpe(list[i]); } );
                subElt.innerHTML = list[i];
                elt.appendChild(subElt); // Insertion du nouveau sous-élément
                console.log(subElt);
            }
     
            // Si la categorie selectionnee a des enfants alors il faut les supprimer
            } else {
                var children = elt.childNodes;
                for ( var i = eltChildLength - 1; i >= 1; i-- ) {
                    elt.removeChild(children[i]);
                }
     
            }
        }
     
    }

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut testcase non valide
    Re-bonjour,
    J'ai écrit mon test case à la voléée. il ne fonctionne pas. Il y a des erreurs.
    Vraiment navré. je me penche sur le sujet et vous envoie quelque chose de convenable.
    Encore désolé à tous, je fais le nécessaire.

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut reprise du code en javascript sans erreurs
    Re-bonjour,
    J'avais repris mon code à la volée pour fournir un testcase simple et je ne l'avais pas testé avant, et bien évidemment il ne tournait pas rond. Voilà maintenant c'est corrigé.
    Même si le code pour développer "porc" n'est pas fourni, je constate bien qu'en cliquant sur "porc", ma fonction "developpe" prend en argument "viandes" et non "porc" .
    Je n'en comprend pas la raison. Vue mon niveau de débutant, je pense que c'est quelque chose de flagrant mais qui à moi m'échappe.
    Voici le code du testcase:
    index.htmpl
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
     
    <!DOCTYPE html>
    <html>
        <head>
            <!-- En-tête de la page -->
            <meta charset="utf-8" />
            <title>Le bon prix</title>
     
        </head>
     
     
        <body>
            <h1 id="titre">Le bon prix</h1>
            <div>
     
                <script>
                    function initpage(valElt) {
                        var elt = document.createElement("h1"); // Création d'un élément de balise "h1"
                        elt.id = valElt; // Définition de son identifiant
                        elt.name = valElt;
                        elt.className = "niveau1";
                        elt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
                        elt.innerHTML = valElt;
                        elt.addEventListener("click", function() { developpe(valElt); } );
                        document.getElementById("titre").appendChild(elt);
                
                    }
                    initpage("viandes");
                </script>
            </div>
            <script src="./developper.js"></script>
        </body>
    </html>

    developper.js:
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
    function developpe(valElt) {
        if (valElt) {
        var elt = document.getElementById(valElt);
        var eltClassName = elt.className;
        var eltChildLength = elt.childNodes.length;
     
        // Si la categorie selectionnee n'a pas d'enfants alors il faut creer les enfants
        // pour pour simuler un developpement en sous-categories de la catégorie elle-même
        if (eltChildLength <= 1) {
            var list = ['Boeuf','Porc'];
            listLength = list.length;
            for (var i = 0; i < listLength; i++) {
                var subElt = document.createElement("h3"); // Création d'un sous élément de balise "h3"
                subElt.id = list[i].toLowerCase(); // Définition de son identifiant
                subElt.name = list[i].toLowerCase();
                subElt.className = "niveau2";
                subElt.setAttribute("onmouseover", 'this.style.cursor=\'pointer\';');
                subElt.addEventListener("click", function() { developpe(list[i]); } );
                subElt.innerHTML = list[i];
                elt.appendChild(subElt); // Insertion du nouveau sous-élément
                console.log(subElt);
            }
     
            // Si la categorie selectionnee a des enfants alors il faut les supprimer
            } else {
                var children = elt.childNodes;
                for ( var i = eltChildLength - 1; i >= 1; i-- ) {
                    elt.removeChild(children[i]);
                }
     
            }
        }
     
    }

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    Novembre 2018
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 58
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Architecte de système d'information

    Informations forums :
    Inscription : Novembre 2018
    Messages : 13
    Points : 5
    Points
    5
    Par défaut Cloture de la discussion: j'ai rendu confus le fil de la discussion
    J'ai un peu avancé mais je suis face à un comportement que je ne comprends pas. Je vais re-ouvrir une discussion plus claire.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. removeEventListener semble ne pas fonctionner.
    Par sacapuss2 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/07/2011, 19h56
  2. [Security] [Spring-Flex][ACEGI] Semble ne pas fonctionner
    Par arnaud.tlse dans le forum Spring
    Réponses: 0
    Dernier message: 05/08/2010, 17h04
  3. [Thread] interrupt qui semble ne pas fonctionner
    Par Balbuzard dans le forum Concurrence et multi-thread
    Réponses: 2
    Dernier message: 05/09/2008, 12h17
  4. clear:both semble ne pas fonctionner
    Par Bayard dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/10/2007, 13h14
  5. [firePropertyChange] semble ne pas fonctionner ?
    Par jcodeunpeu dans le forum AWT/Swing
    Réponses: 11
    Dernier message: 19/12/2005, 15h37

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