Discussion :

[BROADSIDER]

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]

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]

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]

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]

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]

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