Préciser la destination du clonage

Bonsoir,
Je rencontre un problème sur le développement de mon site web. Pour expliquer rapidement le principe je fait apparaître par php des étiquettes, et a chacune de c étiquettes une div (mes étiquettes sont des soldats), et j'ai créé un bouton dans cette div qui en ouvre une nouvelle avec des armes, et j'aimerais quand j'appui sur le bouton ajouter de l'arme qu'un clone de l'arme soit créé et ajouté dans la div propre à l'unité. Mais problème ma fonction ne permet d'ajouter les armes seulement à la première unité de la liste même si j'appui sur le bouton "équipement" d'une autre unité. J’espère que quelqu'un pourra m'aider car je suis actuellement bloqué.

Voici la fonction permettant de cloné l'arme:

Code:

---

1 2 3 4 5 6 7 8

function clone3(elem){ var elem= elem.parentNode; var clone = elem.cloneNode(true); var oDest= document.getElementById('cartArea2'); //cartArea2 est la destination oDest.appendChild(clone); Update(); }

---

Et ici une partie du code que je fais apparaitre par php qui contient pour chaque unité la div ou j'aimerais ajouté l'arme:

Code:

---

1 2

<p class=floatleft> <div class=element> <li class=eti1 data-value2=15 data-value=39> <img class=product id=Cadre_Fireblade src=**> <div class=equipement drop-zone drop-zone1 id=cartArea2> </div> <a href=**>Cadre_Fireblade</a></br>39pts-15€ <br/></li> </div><p class=floatleft> <div class=element> <li class=eti1 data-value2=0 data-value=72> <img class=product id=Commander_Crisis src=**> <div class=equipement drop-zone drop-zone1 id=cartArea2> </div> <a href=>Commander_Crisis</a></br>72pts-nd€ <br/></li> </div><p class=floatleft> <div class=element> <li class=eti1 data-value2=40 data-value=76> <img class=product id=Enforcer_Battlesuit src=**> <div class=equipement drop-zone drop-zone1 id=cartArea2> </div> <a href=**>Enforcer_Battlesuit</a></br>76pts-40€ <br/>

---

Et voici la manière dont je créer pour chaque unité le bouton équipement ainsi que la fonction qui permet d'afficher la liste des armes:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

function afficher_div4(id) { document.getElementById("boxD").style.display = 'block'; document.getElementById("fermer").style.display = 'block'; }   var ajout="<span class='ajout' title='Equipement' onclick='afficher_div4(boxD);'> E </span>"; var oElems = document.querySelectorAll(".drop-zone1 li"); var i; var nb = oElems.length;   for (i = 0; i < nb; i += 1) { oElems[i].setAttribute("draggable", "true"); oElems[i].addEventListener("dragstart", handleDragStart, false); oElems[i].dataset.num = oElems[i].textContent; oElems[i].insertAdjacentHTML("beforeend", ajout); Update(); }

---

Je pense qu'il faudrait que mon javascript différencie chaque cartArea2 et chaque bouton équipement pour que des que j'appui sur le bouton équipement d'une unité ça soit à elle qu'est ajouté l'arme mais je n'est aucune idée de comment faire.

Bonjour,

1. Ton code HTML est mal structuré. J’ai refait l’indentation pour que tu voies le problème :

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

<p class=floatleft> <div class=element> <li class=eti1 data-value2=15 data-value=39> <img class=product id=Cadre_Fireblade src=** /> <div class=equipement drop-zone drop-zone1 id=cartArea2></div> <a href=**>Cadre_Fireblade</a> <br /> 39pts-15€ <br /> </li> </div>   <p class=floatleft> <div class=element> <li class=eti1 data-value2=0 data-value=72> <img class=product id=Commander_Crisis src=** /> <div class=equipement drop-zone drop-zone1 id=cartArea2></div> <a href=>Commander_Crisis</a> <br /> 72pts-nd€ <br /> </li> </div>   <p class=floatleft> <div class=element> <li class=eti1 data-value2=40 data-value=76> <img class=product id=Enforcer_Battlesuit src=** /> <div class=equipement drop-zone drop-zone1 id=cartArea2></div> <a href=**>Enforcer_Battlesuit</a> <br /> 76pts-40€ <br />

---

Les <p> ne sont jamais fermés et ça fait une cascade. Certes, les navigateurs corrigent automatiquement, mais il vaut mieux ne pas compter là-dessus. Je t’encourage à utiliser un validateur ou un nettoyeur de code. Tu verras aussi d’autres problèmes comme ces <li> qui n’appartiennent à aucune liste. Et aussi des histoires de guillemets : ces drop-zone et drop-zone1 sont censés être des classes ou des attributs ?
Quant aux <br />, c’est moins important mais : ils ne sont pas censés être utilisés pour la mise en page. Utilise CSS et gère ça avec des marges ou du positionnement.

2. Le principe d’un attribut id c’est qu’il doit être unique dans la page. Si tu as plusieurs éléments avec le même id, le navigateur sélectionne le premier qu’il trouve, et ça explique le résultat que tu observes. Il va falloir ruser : pour commencer, donne un id différent à chacune des <div> d’équipement. Ensuite, il va falloir s’arranger pour que la fonction clone3 reçoive la bonne destination. Le plus simple est de l’ajouter en paramètre.

Code:

---

1 2 3 4 5 6 7

function clone3(elem, oDest) { elem = elem.parentElement; let clone = elem.cloneNode(true);   oDest.appendChild(clone); Update(); }

---

Pour passer la bonne valeur, tu vas devoir modifier le gestionnaire de click de tes boutons. Mais tu n’as pas montré le code qui fait ça donc je ne peux pas t’aider. Cela dit, je peux te donner quelques pistes. Choisis ce qui te paraît le plus simple :

• remonter la chaîne des parentElement pour trouver l’id ;
• stocker l’information dans un attribut data ;
• avoir une <div> d’armes différente pour chaque <div> d’équipement.

3.

Code:

---

var ajout="<span class='ajout' title='Equipement' onclick='afficher_div4(boxD);'> E </span>";

---

Meeeeh, du code JS dans du code HTML dans du code JS… Un cauchemar pour la maintenance. Je te propose de réécrire ce passage :

Code:

---

1 2 3 4 5 6 7

let oAjout = document.createElement("span"); oAjout.className = "ajout"; oAjout.title = "Équipement"; oAjout.addEventListener("click", function () { afficher_div4("boxD"); // j’ai ajouté les guillemets }); oAjout.textContent = " E ";

---

Et à l’insertion :

Code:

---

oElems[i].insertAdjacentElement("beforeend", oAjout.cloneNode(true));

---

Bonjour,
1.Tout d'abord merci pour ce nettoyage je vais m'occuper de restructurer et nettoyer tout ca. Ensuite mes drop-zone sont mes class.
2.Etant donné que tout est généré par php je vais donc mettre en id une variable, mais cela marchera simplement avec le oDest en paramètre? Et je pense que je vais tenter de passer par la 3ème solution.
3.Aha ! Je vais essayer de rendre tout ca plus propre aussi, merci de votre aide je vais retravailler tout ça et voir se que ça donne😉

J'ai décidé de faire apparaître pour chaque unité via php le bouton me permettant de faire apparaître la div des armes qui à un id différents a chaque fois (boxD), un bouton avec un id différents pour chaque unités qui fait apparaître boxD (ajout), et enfin chaque div ou devra être envoyé l'arme en fonction de qu'elle bouton ajout utiliser à aussi un id différents.
Voici ce que sa donne:

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

<p class=floatleft> <div class=element> <li class=eti1 data-value2=15 data-value=39> <img class=product id=Cadre_Fireblade src=**> <div class=equipement drop-zone drop-zone1 id=1> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=1> E </span> <div class='drop-zone1 element-holder boxD' id=1> </div> <a href=**>Cadre_Fireblade</a></br>39pts-15€ <br/> </li> </div> </p> <p class=floatleft> <div class=element> <li class=eti1 data-value2=0 data-value=72> <img class=product id=Commander_Crisis src=**> <div class=equipement drop-zone drop-zone1 id=2> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=2> E </span> <div class='drop-zone1 element-holder boxD' id=2> </div> <a href=**>Commander_Crisis</a></br>72pts-nd€ <br/> </li> </div> </p> <p class=floatleft> <div class=element> <li class=eti1 data-value2=40 data-value=76> <img class=product id=Enforcer_Battlesuit src=**> <div class=equipement drop-zone drop-zone1 id=3> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=3> E </span> <div class='drop-zone1 element-holder boxD' id=3> </div> <a href=**>Enforcer_Battlesuit</a></br>76pts-40€ <br/> </li> </div> </p>

---

Mais je bloque désormais car je ne sais pas comment faire une fonction qui à chaque fois que je décide d'appuyer par exemple sur le bouton avec l'id=2 m'ouvre la boxD avec l'id qui est égale à 2 aussi... Et le problème se répète encore pour les boutons de chaque armes qui devront envoyer l'arme dans la bonne div en fonction de qu'elle bouton ajout à était actionner par l'utilisateur. mais pour l'instant je cherche au moins une fonction qui me permettrais d'ouvrir la bonne div en fonction du bon bouton actionner. Lorsque j'avais qu'une seul div j'utiliser ça:

Code:

---

1 2 3 4 5

function afficher_div4(id) { document.getElementById("boxD").style.display = 'block'; }

---

J’espère que vous pourrez me débloquer!

Tu n’as pas réglé ton problème d’id unique : par exemple, tu as deux éléments (un <div> et un <span>) qui ont id=1.

Et aussi, j’ai oublié de te dire, mais un id est censé commencer par une lettre, sinon les sélecteurs CSS (par exemple #1 { display: block; }) ne fonctionnent pas.
Ce qui est dommage car j’allais te parler de la très appréciable fonction querySelector qui marche avec des sélecteurs CSS justement.

Et il y a un autre truc dont j’ai oublié de parler quand j’ai écrit ceci :

Citation:

---

• remonter la chaîne des parentElement pour trouver l’id ;

---

C’est que dans un gestionnaire d’évènement, ta fonction de rappel reçoit un event en argument, qui a notamment une propriété event.target qui donne l’élément cliqué. Combiné à querySelector, ça te permet de faire des trucs comme ça :

Code:

---

1 2 3 4

... .addEventListener("click", function (event) { let oBoxD = event.target.parentElement.querySelector(".boxD"); oBoxD.style.display = "block"; });

---

C’est très pratique car tu n’as qu’une seule fonction à écrire pour tous les <span>.

Reste un détail à régler : comment attacher cette fonction aux <span> ? Là il y a deux méthodes. La plus simple est de faire une boucle, et là je te présente une variante de querySelector qui trouve tous les éléments correspondant au sélécteur : querySelectorAll. Et aussi : la boucle for … of.

Code:

---

1 2 3

for (let oAjout of document.querySelectorAll(".ajout")) { oAjout.addEventListener( ... ); }

---

L’autre méthode est légèrement plus complexe et elle porte un nom : la délégation d’évènement. Il s’agit d’écouter l’évènement sur un parent commun à tous les <span>, et ensuite de regarder event.target pour savoir sur quel élément on est, et donc ce qu’il faut faire.

Code:

---

1 2 3 4 5 6 7

parentCommun.addEventListener("click", function (event) { let oTarget = event.target; if (oTarget.classList.contains("ajout")) { let oBoxD = oTarget.parentElement.querySelector(".boxD"); oBoxD.style.display = "block"; } });

---

Bonjour,

Citation:

---

Voici ce que sa donne:

---

tu n'as visiblement pas bien saisi ce que voulait dire Watilin lorsqu'il écrit « 1. Ton code HTML est mal structuré.  ».

Voila ce que devrait donner, approximativement, ton code HTML rendu par les navigateurs

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<p class="floatleft"></p> <div class="element"> <li class="eti1" data-value2="15" data-value="39"> <img class="product" id="Cadre_Fireblade" src="**"> <div class="equipement" drop-zone="" drop-zone1="" id="1"> </div> <span class="ajout" title="Equipement" onclick="afficher_div4(boxD);" id="1"> E </span> <div class="drop-zone1 element-holder boxD" id="1"> </div> <a href="**">Cadre_Fireblade</a><br>39pts-15€ <br> </li> </div> <p></p>

---

Pour manipuler le DOM il est bon que celui-ci corresponde à l'attendu !

Validation HTML, vous avez dit validation HTML, cela devrait être un réflexe ;)

Me revoila,
Tout d'abord merci beaucoup pour votre aide, j'ai travaillé se que vous m'avez donné et cela commence à prendre forme mais j'ai encore quelques petits problème que j’espère vous parviendrez à m'aider pour leur résolution.
1.Désormais qu'en j'appui sur le bouton équipement la div s'affiche bien et est bien propre à chaque unité mais je dois d'abord effectuer "un clique à vide" pour initialiser la fonction est ce normal?
2.J'ai essayé de reprendre la fonction en modifiant le style display en "none" pour pouvoir la faire disparaître en appuyant sur un bouton croix qui apparaît à coté de chaque div pour chacune d'entre elles. Ce qui donne ca:

Code:

---

1 2 3 4 5 6 7 8 9

function masquer_equipement(){ for (let oAjout of document.querySelectorAll(".btn-fermer")) { oAjout.addEventListener("click", function (event) { let oBoxD = event.target.parentElement.querySelector(".boxD"); oBoxD.style.display = "none"; }); } }

---

Voici le bouton:

Code:

---

1 2	<span class='btn-fermer' title='Supprimer' onclick='masquer_equipement();' id=Cadre_Fireblade>X</span>

---

Une fois ceci régler il me restera un dernier problème: envoyer chaque arme dans la div de l'unité.

L’attribut onclick, c’est un addEventListener implicite. Il appelle ta fonction masquer_equipement, qui à son tour appelle addEventListener. Ça explique pourquoi tu dois cliquer deux fois.
Note que, par la suite, à chaque fois que tu cliques sur le bouton, ça inscrit un nouveau gestionnaire d’évènement. En plus de faire des appels dupliqués à chaque clic, à la longue ça peut finir par saturer la file d’évènements.

Tout le code que j’ai donné part du principe que tu n’utilises pas d’attribut onclick. Tout se passe dans le code JS. La boucle for doit être exécutée dès que le DOM est prêt, donc soit tu places ta balise <script> à la fin / après le <body>, soit tu places ton code dans un gestionnaire DOMContentLoaded :

Code:

---

1 2 3 4 5 6

document.addEventListener("DOMContentLoaded", function () { // initialisation des boutons for ( ... ) { ... } });

---

Bon bon,
J'ai beaucoup travailler le code et le fait que vous m'ayez fait remarquer que le onclick était un événement implicite je m'en suis servis pour épurer le code et maintenant tout fonctionne donc merci beaucoup! Il me reste plus qu'un dernier détails qui a son importance pour mon site. Maintenant chaque unités a sa propre div d'équipement et chaque bouton contrôle chaque div qu'il peux faire apparaître et disparaître. Mais maintenant il me reste a paramétrer chaque boutons "equiper" de chaque armes pour qu'il envoi l'arme dans la div "equipement"de l'unité et la je bug... car je n'arrive pas à récupérer l'armes via l'événement "onclick" pour ensuite la cloner dans la div équipement.
Voici une partie de la liste d'arme générer, avec le bouton "equiper".

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class=element> <li class=eti2bis data-value2=0 data-value=65> <span class='btn-ouvrir' title='Equiper' onclick='clone3();'>+</span> Accélérateur à ions 65pts </li> </div>   <div class=element> <li class=eti2bis data-value2=0 data-value=0> <span class='btn-ouvrir' title='Equiper' onclick='clone3();'>+</span> Bombe à impulsions 0pts </li> </div>   <div class=element> <li class=eti2bis data-value2=0 data-value=8> <span class='btn-ouvrir' title='Equiper' onclick='clone3();'>+</span> Canon à induction 8pts </li>

---

Et voila une partie des unités avec la div "equipement"ou je désire envoyer l'arme.

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

<p class=floatleft> <div class=element> <li class=eti1 data-value2=15 data-value=39> <img class=product id=Cadre_Fireblade src=**> <div class=equipement drop-zone drop-zone1 id=1> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=1> E </span> <div class='drop-zone1 element-holder boxD' id=1> </div> <a href=**>Cadre_Fireblade</a></br>39pts-15€ <br/> </li> </div> </p> <p class=floatleft> <div class=element> <li class=eti1 data-value2=0 data-value=72> <img class=product id=Commander_Crisis src=**> <div class=equipement drop-zone drop-zone1 id=2> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=2> E </span> <div class='drop-zone1 element-holder boxD' id=2> </div> <a href=**>Commander_Crisis</a></br>72pts-nd€ <br/> </li> </div> </p> <p class=floatleft> <div class=element> <li class=eti1 data-value2=40 data-value=76> <img class=product id=Enforcer_Battlesuit src=**> <div class=equipement drop-zone drop-zone1 id=3> </div> <span class='ajout' title='Equipement' onclick='afficher_div4(boxD);' id=3> E </span> <div class='drop-zone1 element-holder boxD' id=3> </div> <a href=**>Enforcer_Battlesuit</a></br>76pts-40€ <br/> </li> </div> </p>

---

Je me suis donc remis aux travail et j'ai réussi à faire ça:

Code:

---

1 2 3 4 5 6 7 8

function clone3(elem){ var elem= elem.parentNode; var clone = elem.cloneNode(true); var oDest= document.querySelector('.equipement'); oDest.appendChild(clone); Update(); }

---

Mais le problème est que peux importe qu'elle équipement de qu'elle unités j'utilise, l'ajout de l'arme va seulement sur la première unité de la liste.

En fait depuis le début j’essaye de te décourager d’utiliser les attributs onclick, mais peut-être que je n’ai pas été assez clair :roll:
Enfin bon, si tu préfères faire ainsi, par honnêté je dois te montrer ce qui te manque pour que ça marche. Après tout, tu auras tout le temps, à mesure que tu apprends, pour te rendre compte des problèmes que ça pose.

Les attributs d’évènements onclick, onchange, etc. ont un argument implicite event et un contexte this. Tu peux utiliser event.target comme je t’ai montré, ou directement this, c’est équivalent dans ton cas car tes <span> n’ont pas d’éléments enfants.

Code:

---

<span ... onclick="test(this)">

---

Code:

---

1 2 3

function test(elem) { console.log(elem); }

---

Si tu ne le sais pas encore, les messages console.log() sont affichés dans l’onglet « Console » du panneau de développement qui s’ouvre avec F12.

Pour t’aider à comprendre le problème qui se trouve dans ta fonction clone3(), je te propose d’essayer l’inspecteur, un autre outil du panneau F12 (tuto Firefox – tuto Chrome). L’inspecteur est lié à la console : quand un élément est sélectionné dans l’inspecteur, il est accessible via la variable $0 dans la console. Ça te permet d’examiner ses propriétés et d’appeler ses méthodes. Inversement, si tu appelles querySelector() (et similaires) dans la console, ça te permet d’examiner les éléments correspondants dans l’inspecteur.

Donc, je te propose d’essayer l’instruction suivante dans la console et de voir quel élément ça te renvoie.

Code:

---

document.querySelector(".equipement")

---

Ensuite, essaye ceci :

Code:

---

document.querySelectorAll(".equipement")

---

Enfin, sélectionne un de tes <span> dans l’inspecteur, et essaye cette instruction :

Code:

---

$0.parentElement.querySelector(".equipement")

---

Le point important à retenir, c’est qu’il y a une différence entre appeler querySelector() sur le document entier, et sur un élément particulier (idem pour querySelectorAll()). Si tu utilises document.querySelector(), ça te renvoie le premier élément trouvé dans tout le document.


Il reste (au moins) un problème important dans ton HTML avec les guillemets. Tu as précisé que les drop-zone étaient des classes, mais si tu regardes le code de NoSmoking, tu verras qu’ils sont transformés en attributs. D’ailleurs, tu peux t’en rendre compte toi-même en utilisant l’inspecteur.
Quand un élément a plusieurs classes, tu es obligé de mettre des guillemets autour :

Code:

---

<div class="equipement drop-zone drop-zone1"> </div>

---

Et tu n’as pas corrigé les id :!: Je te rappelle qu’ils doivent être uniques, et ne pas commencer par un chiffre.

D'accord merci beaucoup pour toutes ces informations je vais prendre le temps de tout analyser et reviendrais dire ou j'en suis en espérant que ça sera pour mettre le sujet en "résolu" 😉 Cependant il me reste une dernière question, je me suis rendu compte que le fais de créer une div pour chaque unité où à l'intérieur et généré pour chacune d'entre elle les armes disponible rendais la page tres longue à chargé car même si le display est en none les armes dans les divs sont généré donc comment puis-je faire? Existe-t-il un display qui ne génère pas se qu'il y'a à l'intérieur de la div ? Ou dois-je changé ma méthode et au lieu de juste changé le display en appuyant sur le bouton utiliser une fonction qui appel (comme un include) mon php à genéré?

J'ai donc appris à me servir de la console et cela est hyper pratique! Merci beaucoup! J'ai donc pu voir la différence entre le querySelector et le querySelectorAll. J'ai donc changer mon code, mais j'ai un problème quand je met querySelectorAll mais armes ne sont plus cloné et la console affiche un message d'erreur : "oDest.appendChild is not a function", alors que cela ne s'affiche pas quand j'utilise juste le querySelector. Voici ma fonction:

Code:

---

1 2 3 4 5 6 7 8

function clone3(elem){ var elem= elem.parentNode; var clone = elem.cloneNode(true); var oDest= document.querySelectorAll('.equipement'); oDest.appendChild(clone); Update(); }

---

Je ne comprend pas pourquoi cela s'affiche et je voulez vous demandez si en utilisant le All quand je vais cloné mon image cela ne va pas la mettre dans toutes les divs équipement ? alors que je voudrais quelle soit seulement dans celle de l'unité attitré?

Citation:

---

J'ai donc pu voir la différence entre le querySelector et le querySelectorAll.

---

Visiblement tu n'as pas tout bien saisi ce que faisaient ces méthodes, à preuve

Citation:

---

je voulez vous demandez si en utilisant le All quand je vais cloné mon image cela ne va pas la mettre dans toutes les divs équipement

---

Une lecture attentive de

• document.querySelector
• document.querySelectorAll()

devrait répondre à ta question ;)

Ah d'accord... Mais ducoup il faut que j'utilise une aitre sélection pour que quand j'appuie sur le bouton a jout sa ajoute l'arme dans la div equipemznt de l'unité approprié.

Bonjour !
Il y a un truc qui me dérange ici :

Code:

---

<span class='btn-ouvrir' title='Equiper' onclick='clone3();'>+</span>

---

Tu ne passes pas de paramètre à clone3(). Alors de deux choses l’une :

• soit ton code lance une erreur et tu ne la vois pas, et ça veut dire que tu n’utilises pas bien la console ;
• soit tu as modifié ton code entre temps et tu ne nous as pas montré la nouvelle version.

Code:

---

1 2 3 4

function clone3(elem){ var elem= elem.parentNode; // erreur ici // le reste du code n’est jamais exécuté }

---

Oui c'est exact j'ai modifié le paramètre en mettant (this). Et ducoup je ne vois pas l'erreur dans la déclaration de la variable?

Il n’y a pas d’erreur. Comme tu as modifié ton code, la projection que j’avais faite n’est plus valable.

Applique cette même technique du this avec ta fonction afficher_div4(). En combinant avec parentElement et querySelector(), tu devrais y arriver. Relis bien tout ce qu’on t’a dit ;)

Bon j'ai beaucoup travaillé mon code mais au final j'ai très peu avancé... J'ai essayé de faire fonctionner le onclick mais n'est pas réussi... J'ai donc repris toute la discussion, je me suis donc occupé des id unique sur les div équipement:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class=element> <li class="eti1" data-value2="0" data-value="72"> <img class="product" src="**"> <div class="equipement" id="Commander_Crisis"> </div> <span class="ajout" title="Equipement" onclick="equipement();"> E </span> <div class="boxE" id=2> <span class="btn-fermer" title="Fermer' onclick='masquer_equipement();'>X</span>                                        <aside  class='boxD'>                                             <input class='search2" id="search2" type="text" autocomplete="off" /> </aside> </div> <a href="**">Commander_Crisis</a><br/>72pts-nd€ <br/> </li> </div>

---

Puis me suis débarrassé du onclick sur le btn-ouvrir:

Code:

---

1 2 3 4 5

<li class="eti2bis" data-value2="0" data-value="65"> <span class="btn-close2" title="Supprimer" onclick="removeParent(this)">X</span> <span class="btn-ouvrir" title="Equiper">+</span> Accélérateur à ions 65pts </li>

---

Ensuite j'ai repris la fonction de clonage:

Code:

---

1 2 3 4 5 6 7

function clone3(elem, oDest) { elem = elem.parentElement; let clone = elem.cloneNode(true);   oDest.appendChild(clone); Update(); }

---

Mais après je bloque car je ne comprend pas à quoi correspond le oDest et ce que je dois en faire...
Il me semble que c'est la destination mais dois je faire un fonction ou je la récupère ? Ou bien une boucle?

Tu as un problème de guillemet ici :

Code:

---

1 2 3 4 5

<!-- .................................v --> <span class="btn-fermer" title="Fermer' onclick='masquer_equipement();'>X</span>     <aside  class='boxD'>          <input class='search2" id="search2" type="text" autocomplete="off" /> <!-- ........^ -->

---

Observe la coloration syntaxique. Peut-être que tu devrais essayer, dans ton éditeur de code, un jeu de couleurs qui met mieux en évidence les chaînes.

Pour le reste, ça devient très confus car il commence à y avoir beaucoup de onclick dans ton code et ils appellent tous des fonctions différentes.

Je te propose un cas simplifié pour t’aider à comprendre dans de meilleures conditions ce dont on a parlé jusqu’ici.
Prenons ce code HTML :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div> <span class="abc"> Banane </span> <span class="def"> Kiwi </span> <span class="xyz"> Pomme </span> <button onclick="javaisPasDideeDeNom(this)"> Clic </button> </div>   <div> <span class="abc"> Banane </span> <span class="def"> Kiwi </span> <span class="xyz"> Pomme </span> <button onclick="javaisPasDideeDeNom(this)"> Clic </button> </div>   <div> <span class="abc"> Banane </span> <span class="def"> Kiwi </span> <span class="xyz"> Pomme </span> <button onclick="javaisPasDideeDeNom(this)"> Clic </button> </div>

---

Et ce script :

Code:

---

1 2 3 4 5 6 7 8

function javaisPasDideeDeNom(element) { // element = le bouton cliqué let oDiv = element.parentElement; console.log(oDiv);   let oSpan = oDiv.querySelector(".def"); oSpan.style.outline = "dashed 2px #b09"; // bordure en pointillés }

---

Quand tu cliques sur le bouton, la fonction javaisPasDideeDeNom() (désolé :aie:) fait deux choses :

1. elle remonte jusqu’à la <div> parente grâce à parentElement et l’affiche dans la console ;
2. elle sélectionne le <span> ayant la classe def, grâce à querySelector(), et lui applique une bordure toute moche.

Remarque qu’il n’y a aucun id dans mon code : dans ce cas simple, on n’en a pas besoin. (Je ne dis pas que tu n’en auras pas besoin dans ton cas.)

Voilà, c’est à peu près la moitié de la solution, dis-moi déjà si tu comprends et si tu arrives à faire marcher ça dans ton code. Bien sûr, une bête bordure ça manque de swag, mais si tu arrives à l’appliquer au bon élément ça veut dire que tu as réussi à accéder à cet élément, et donc que tu pourras faire ce que tu veux avec.

Et sinon pour les histoires de boucle, c’était ma proposition pour éviter d’utiliser les onclick. Mais tu n’as pas choisi cette voie, donc laissons tomber la boucle ;)

D'accord je vais travailler ça ! Merci beaucoup pour le temps que tu prends à m'expliquer tout pour régler mon problème! Je reviens des que je maitrise tout!😉

Au passage n'hésite pas à rendre ton code HTML conforme, je t'ai déjà donné le lien pour la validation.

Enfiiiiin!!! Mille merci Watilin!!! J'ai repris ton document et j'ai tenté de l'adapter pour cloner les phrases de la même manière que je voulais le faire sur mon site et bim la lumière c'est enfin allumé !!! J'arrive enfin à maîtriser le parentElement, et le querySelector, se qui m'a permis en faisant tout une multitude de parentElement pour remonter l'arborescence de mon html parvenir à récupérer ma destination et ensuite hop il ma suffit d'utiliser ma méthode de clonage! Vraiment merci d'avoir pris le temps de m'accompagner dans ma recherche et prendre le temps de tout expliquer, même si j'ai bien ramé ta méthode pédagogique est excellent ! Encore merci et à bientôt! :D

Cool ! Ravi d’avoir aidé :D