Récupérer les data-value des childNodes

Version imprimable

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:

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:

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:

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!

19/03/2019, 23h02
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:

1 2 Totalprice += parseInt(Enfants[k].dataset.value); Totalprice2 += parseInt(Enfants[k].dataset.value2);
:fleche: Voir Utiliser les attributs de données.

Bonjour,
• point 1
quand on voit

Code:

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

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

Code:

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

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

• point 2

Code:

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:

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:

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:

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.

20/03/2019, 22h17
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:

Citation:

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! ;)
21/03/2019, 09h58
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 ?
Citation:

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">
21/03/2019, 10h20
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?
21/03/2019, 10h39
NoSmoking
Je t'ai déjà proposé une lecture
Citation:
Envoyé par NoSmoking 18/03/2019 à 09h00

Une lecture attentive de

document.querySelector
document.querySelectorAll()
et en utilisant un sélecteur d'attribut cela devrait le faire.
21/03/2019, 11h44
SpaceFrog

avec JQUERY il y a le .fliter() qui accepte une fonction personnalisés qui pourrait retourne le résultat d'un test hasData ...
21/03/2019, 13h29
BROADSIDER
Est-ce possible de récupérer tout les children en faisant quelque chose qui ressemble à ca:
Code:

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 😅
21/03/2019, 14h47
SpaceFrog

hormis pour le [ ... as tu essayé ?
21/03/2019, 16h00
BROADSIDER

Oui j'ai essayé et ca ne fonctionne pas...
21/03/2019, 16h22
SpaceFrog

Tu confonds collection et élément...

https://jsfiddle.net/qLan27dg/

https://jsfiddle.net/qLan27dg/1/
21/03/2019, 19h16
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.
22/03/2019, 17h44
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!:D