Discussion :

[BROADSIDER]

Bonjour,
Je cherche à faire une calculette automatique qui me calcul des data-value d'images mais la je n'arrive pas à aller en chercher une particulière.
Voici mon html:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="background2">
    <li class="eti1" data-value2="15" data-value="39">   //li représente une unité et est répété 50 fois par php
      <img class="product" id="Cadre_Fireblade" src="**">
      <div class="equipement" drop-zone="" drop-zone1="" id="1">
               //dans cette div est ajouté par js des armes avec une data-value
      </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>

Et mon problème est que je n'arrive pas à récupérer les data-value des armes que j'ajoute par clonage dans la div de class="equipement" .
Qui une fois cloné ont cette forme:

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" onclick="clone3(this)">+</span> 
   Accélérateur à ions 65pts
</li>

Et voici la fonction qui me permet de récupérer le data-value de l'unité:

Code :

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
function Update()
{
    var Enfants = document.querySelector(".background2").childNodes; 
	var Totalprice = 0;
    var Totalprice2 = 0;
	for(var k = 0; k < Enfants.length; k++)
	{
		if(Enfants[k].nodeType == 1)
		{      
			Totalprice += parseInt(Enfants[k].getAttribute("data-value"));
            Totalprice2 += parseInt(Enfants[k].getAttribute("data-value2"));
		}
	}
	document.getElementsByTagName("section")[1].getElementsByTagName("header")[0].getElementsByTagName("h3")[0]
    .innerHTML = "TOTAL: " + String(Totalprice) + "pts " + String(Totalprice2) + "€" ;
}

Mais je bloque car je n'arrive pas à remonter jusqu'au data-value de mon arme. J'espere que quelqu'un pourra m'éclairer!

[Watilin]

Quand tu utilises getAttribute() tu n’obtiens que la représentation HTML, statique, de l’attribut tel qu’il était au chargement de la page.
De manière générale, les attributs HTML ont presque toujours un équivalent DOM qui, lui, est dynamique. Ce qui fait qu’on n’a pratiquement jamais besoin d’appeler getAttribute().

Les attributs data- sont exposés par le DOM via une propriété .dataset.

Code :

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

1
2
Totalprice += parseInt(Enfants[k].dataset.value);
Totalprice2 += parseInt(Enfants[k].dataset.value2);

Voir Utiliser les attributs de données.

[NoSmoking]

Bonjour,
• point 1
quand on voit

Code :

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

document.getElementsByTagName("section")[1].getElementsByTagName("header")[0].getElementsByTagName("h3")[0].innerHTML = "..."

on peut se demander pourquoi ils ont inventé les ID !

Code :

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

document.getElementById("total").textContent = "..."

code simple qui ne présume pas de la position de l'élément dans la page.

• point 2

Code :

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

var Enfants = document.querySelector(".background2").childNodes;

il serait plus judicieux d'utiliser children ce qui permet de ne pas avoir à tester le type de noeud, ce qui donnerait

Code :

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

1
2
3
4
5
6
7
8
9
10
function Update() {
  var Enfants = document.querySelector(".background2").children; //childNodes;
  var Totalprice = 0;
  var Totalprice2 = 0;
  for (var k = 0; k < Enfants.length; k++) {
    Totalprice += parseInt(Enfants[k].getAttribute("data-value"));
    Totalprice2 += parseInt(Enfants[k].getAttribute("data-value2"));
  }
  document.getElementById("total").textContent = "TOTAL: " + String(Totalprice) + "pts " + String(Totalprice2) + "€";
}

• point 3

Code :

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

document.querySelector(".background2").childNodes;

ce code retourne la nodeList des enfants de premier niveau et non de « niveau profond », et comme tu l'as écrit dans ton HTML

Code html :

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

1
2
3
<div class="equipement" drop-zone="" drop-zone1="" id="1">
//dans cette div est ajouté par js des armes avec une data-value
</div>

n'est pas enfant de <div class="background2"> mais de <li class="eti1" data-value2="15" data-value="39"> donc non pris en compte.

On peut se poser la question de pourquoi ne pas cibler directement cet élément d'ailleurs !?!

Quoiqu'il en soit, je le répète, le résultat HTML obtenu est mal foutu.

• point 4
@Watilin : Le coup des getAttribute et lié au fait qu'un exemple que j'avais fourni était compatible IE10, donc effectivement on peut raisonnablement s'en passer actuellement même si les habitudes de codages ont la vie dure.

[BROADSIDER]

Tout d'abord merci pour ces nouveaux apports. Mais en faite j'ai oublié d'apporter une information essentiel qui va répondre à ta question du point 3 qui est très bien vu @NoSmocking:

On peut se poser la question de pourquoi ne pas cibler directement cet élément d'ailleurs !?!

Donc premièrement j'ai régler les points un et deux, mais deuxièment pour répondre à ton interrogation le fait pour moi de prendre les children du background à pour intérêt de récupérer le prix et cout de l'unité donc ca je ne désir pas y toucher. Aprés se que je souhaite ajouter c'est qu'en plus du prix et cout des unités je souhaite ajouter les coût des armes qui elles se situent dans la div ".equipement". Tout en sachant que je veux récupérer cette value qu'une fois que mon image est cloné dans le ".background2", car toutes mes images sont initialement dans une div ".background1". Mais suite à un choix fais par l'utilisateur les unités qu'ils désirent choisir ainsi que les armes avec lesquels ils les équipent sont cloné dans le ".background2". Et donc j'ai ouvert cette discussion car je n'arrive pas à remonter jusqu'à la div ".équipement" pour récupérer ses values, tout en sachant que je les veux seulement une fois qu'elles sont dans le ".background2". J'espère cette fois avoir été plus clair et que quelqu'un pourra me guider vers la méthode la plus efficace à utiliser pour la recupération de ces children!

[NoSmoking]

Je commence par des remarques sur la forme :

• c'est NoSmoking et non NoSmocking.
• tu n'as pas sur ton clavier une touche entrée qui te permet de générer des retours à la ligne ?

Donc premièrement j'ai régler les points un et deux,
mais deuxièment pour répondre à ton interrogation le fait pour moi de prendre les children du background à pour intérêt de récupérer le prix et cout de l'unité donc ca je ne désir pas y toucher.

Aprés se que je souhaite ajouter c'est qu'en plus du prix et cout des unités je souhaite ajouter les coût des armes qui elles se situent dans la div ".equipement".

Tout en sachant que je veux récupérer cette value qu'une fois que mon image est cloné dans le ".background2", car toutes mes images sont initialement dans une div ".background1".

Mais suite à un choix fais par l'utilisateur les unités qu'ils désirent choisir ainsi que les armes avec lesquels ils les équipent sont cloné dans le ".background2".

Et donc j'ai ouvert cette discussion car je n'arrive pas à remonter jusqu'à la div ".équipement" pour récupérer ses values, tout en sachant que je les veux seulement une fois qu'elles sont dans le ".background2".

J'espère cette fois avoir été plus clair et que quelqu'un pourra me guider vers la méthode la plus efficace à utiliser pour la recupération de ces children!

cela m'apparaît quand même comme plus lisible

Ceci étant qu'est ce qui t'empêche de récupérer directement tous les éléments ayant une data-value dans ton élément <div class="background2">

[BROADSIDER]

C'est vrai que c'est mieux
Et désolé pour la coquille sur ton pseudo. Bas cela serait tres pratique mais comment faire? Il existe un éléments de selection qui permait de faire ca?

[NoSmoking]

Je t'ai déjà proposé une lecture

Une lecture attentive de

• document.querySelector
• document.querySelectorAll()

et en utilisant un sélecteur d'attribut cela devrait le faire.

[SpaceFrog]

avec JQUERY il y a le .fliter() qui accepte une fonction personnalisés qui pourrait retourne le résultat d'un test hasData ...

[BROADSIDER]

Est-ce possible de récupérer tout les children en faisant quelque chose qui ressemble à ca:

Code :

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

1
2
var background2 = document.querySelector(".background2");
var Enfants = background2.querySelectorAll(".equipement").children;

Et pour la solution jquery ca pourrais m'interresser mais je ne m'y connais pas du tout 😅

[SpaceFrog]

hormis pour le [ ... as tu essayé ?

[BROADSIDER]

Oui j'ai essayé et ca ne fonctionne pas...

[SpaceFrog]

Tu confonds collection et élément...

https://jsfiddle.net/qLan27dg/

https://jsfiddle.net/qLan27dg/1/

[NoSmoking]

Il faut effectivement lire attentivement la documentation, ceci étant ces méthodes fonctionnent bien pour peu que le HTML soit bien formé.

Je te le redis donc une dernière fois génère un code HTML conforme sinon tu vas avoir des surprises.

[BROADSIDER]

C'est bon!!! Ce n'as pas était une mince affaire mais je suis enfin parvenu au résultat final! Merci @SpaceFrog pour ton lien avec la console qui m'a permis de comprendre la sélection utilisé.
Bonne journée à tous et encore merci!