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