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:
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:
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:
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]);
}
}
} |
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:
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:
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]);
}
}
}
} |
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:
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:
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]);
}
}
}
} |
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.
