Préciser la destination du clonage

**BROADSIDER** · 15/03/2019, 21h34

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
 
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.

**Watilin** · 16/03/2019, 14h46

Bonjour,

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

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
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**BROADSIDER** · 16/03/2019, 15h04

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😉

**BROADSIDER** · 16/03/2019, 16h30

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 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
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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function afficher_div4(id)
{
    document.getElementById("boxD").style.display = 'block';
}

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

**Watilin** · 16/03/2019, 23h17

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
  }
});

**NoSmoking** · 17/03/2019, 08h38

Bonjour,

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**BROADSIDER** · 17/03/2019, 12h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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é.

**Watilin** · 17/03/2019, 12h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.addEventListener("DOMContentLoaded", function () {
  // initialisation des boutons
  for ( ... ) {
    ...
  }
});

**BROADSIDER** · 17/03/2019, 16h36

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 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
 
<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 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
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>

**BROADSIDER** · 17/03/2019, 17h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Watilin** · 17/03/2019, 18h43

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector(".equipement")

Ensuite, essaye ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelectorAll(".equipement")

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**BROADSIDER** · 17/03/2019, 20h27

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é?

**BROADSIDER** · 17/03/2019, 23h07

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é?

**NoSmoking** · 18/03/2019, 09h00

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

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

devrait répondre à ta question

**BROADSIDER** · 18/03/2019, 10h07

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é.

**Watilin** · 18/03/2019, 13h49

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**BROADSIDER** · 18/03/2019, 16h29

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?

**Watilin** · 18/03/2019, 17h44

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

**BROADSIDER** · 18/03/2019, 20h21

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

**Watilin** · 19/03/2019, 00h03

Tu as un problème de guillemet ici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
<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 JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

) fait deux choses :

elle remonte jusqu’à la <div> parente grâce à parentElement et l’affiche dans la console ;
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

Préciser la destination du clonage

JavaScript

Discussions similaires

Partager

Partager