Drag & Drop d'images - affichage calcul erroné

**BROADSIDER** · 31/01/2019, 19h48

Bonjour,
Je cherche à créer un site étant capable de calculer des images que je Drag & Drop, petit problème une fois mon image dans le conteneur de droite (conteneur d'arrivée faisant le calcul), un message d'erreur s'affiche la ou le résultat devrait s'afficher : "NaN" (not a number), donc je pense que mon data-value n'est pas reconnu comme un nombre mais pourquoi? J’espère que quelqu'un pourra me venir en aide car la je sèche, de plus si quelqu'un pourrais me dire comment enlever l'image une fois qu'elle est dans le conteneur sa me serais d'une grand aide, et finalement si quelqu'un c'est comment aussi je pourrais faire pour afficher 2 résultats car je cherche a calculer le nombre de points et le nombre d'euros de chaque image, donc si il existerait une sorte de data-value2? Merci beaucoup d'avance et j’espère que vous parviendrez a me venir en aide! :-D
PS: Je met les pièces jointes du code contenant mes images avec leurs propriétés et le java script permettant de faire le drag & drop et celui permettant le calcul.

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<script>
var cartArea = document.querySelector('#cartArea'); 
 
var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
	prods[i].setAttribute('draggable', 'true'); 
	prods[i].addEventListener('dragstart', function(evnt) {
		this.className = 'itemchoosen';
		evnt.dataTransfer.effectAllowed = 'copy';
		evnt.dataTransfer.setData('text', this.id);
		return false;  
	}, false);
}	
 
 
cartArea.addEventListener('dragover', function(evnt) {
		if (evnt.preventDefault) evnt.preventDefault();
		evnt.dataTransfer.dropEffect = 'copy';
		return false;	
}, false);
 
cartArea.addEventListener('dragenter', function(evnt) {
		return false;	
}, false);
 
cartArea.addEventListener('dragleave', function(evnt) {
		return false;
}, false);
 
cartArea.addEventListener('drop', function(evnt) {
	if (evnt.stopPropagation) evnt.stopPropagation();
	var id = evnt.dataTransfer.getData('text');		
	var theitem = document.getElementById(id);		
	theitem.className='itemblurred';
	var y  = document.createElement('img');
	y.src = theitem.src;
	cartArea.appendChild(y);
	evnt.preventDefault();
	return false;
}, false);
 
function Update()
{
	var Enfants = document.getElementById("cartArea").childNodes;
	var Totalprice = 0;
	for(var k = 0; k < Enfants.length; k++)
	{
		if(Enfants[k].nodeType == 1)
		{      
			Totalprice += parseInt(Enfants[k].getAttribute("data-value"));
		}
	}
	document.getElementsByTagName("div")[1].getElementsByTagName("header")[0].getElementsByTagName("h2")[0]
    .innerHTML = "TOTAL: " + String(Totalprice) + "pts";
}
window.onload = function()
{
	document.getElementById("boxA").addEventListener("drop", Update, false);
	document.getElementById("cartArea").addEventListener("drop", Update, false);
}
 
</script>

Et voila le code que je fait apparaitre par php et le deuxieme conteneur ou j'envoi mes images:

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="background" draggable="true" id="boxA">
        <p class=floatleft> <img data-value=39 class=product id=Cadre_Fireblade src =/theo.briollet/projet07_projetbac/images/Cadre_Fireblade.jpg height=140width=140> <br/>Cadre_Fireblade</br>39pts-25€ <br/> <p class=floatleft> <img data-value=72 class=product id=Commander_Crisis src =/theo.briollet/projet07_projetbac/images/Commander_Crisis.jpg height=140width=140> <br/>Commander_Crisis</br>72pts-60€ <br/> <p class=floatleft> <img data-value=76 class=product id=Enforcer_Battlesuit src =/theo.briollet/projet07_projetbac/images/Enforcer_Battlesuit.jpg height=140width=140> <br/>Enforcer_Battlesuit</br>76pts-40€ <br/> <p class=floatleft> <img data-value=45 class=product id=Ethereal src =/theo.briollet/projet07_projetbac/images/Ethereal.jpg height=140width=140> <br/>Ethereal</br>45pts-13€ <br/> <p class=floatleft> <img data-value=50 class=product id=Ethereal_Drone src =/theo.briollet/projet07_projetbac/images/Ethereal_Drone.jpg height=140width=140> <br/>Ethereal_Drone</br>50pts-13€ <br/> <p class=floatleft> <img data-value=137 class=product id=Longstrike src =/theo.briollet/projet07_projetbac/images/Longstrike.jpg height=140width=140> <br/>Longstrike</br>137pts-13€ <br/> <p class=floatleft> <img data-value=7 class=product id=Breacher_Team src =/theo.briollet/projet07_projetbac/images/Breacher_Team.jpg height=140width=140> <br/>Breacher_Team</br>7pts-40€ <br/> <p class=floatleft> <img data-value=5 class=product id=Kroot_Carnivores src =/theo.briollet/projet07_projetbac/images/Kroot_Carnivores.jpg height=140width=140> <br/>Kroot_Carnivores</br>5pts-30€ <br/> <p class=floatleft> <img data-value=7 class=product id=Strike_Team src =/theo.briollet/projet07_projetbac/images/Strike_Team.jpg height=140width=140> <br/>Strike_Team</br>7pts-40€ <br/> <p class=floatleft> <img data-value=80 class=product id=TY7_Devilfish src =/theo.briollet/projet07_projetbac/images/TY7_Devilfish.jpg height=140width=140> <br/>TY7_Devilfish</br>80pts-30€ <br/> <p class=floatleft> <img data-value=42 class=product id=Crisis_Battlesuit src =/theo.briollet/projet07_projetbac/images/Crisis_Battlesuit.jpg height=140width=140> <br/>Crisis_Battlesuit</br>42pts-60€ <br/> <p class=floatleft> <img data-value=45 class=product id=Crisis_Bodyguards src =/theo.briollet/projet07_projetbac/images/Crisis_Bodyguards.jpg height=140width=140> <br/>Crisis_Bodyguards</br>45pts-60€ <br/>  
    </div>
 
<section class="background2" id="cartArea"> 
 
</section>
 
<div class="resultat">                       
    <header> 
        <h2> TOTAL: 0pts </h2> 
    </header>
</div>

**Auteur** · 31/01/2019, 21h10

Bonjour et bienvenu,

plutôt que de faire des copies d'écran où on ne voit rien, pourquoi ne pas copier-coller le code à la suite du message ?
Tu as des balises code pour cela (bouton # dans l'éditeur).

**ProgElecT** · 31/01/2019, 22h25

Salut

Envoyé par Auteur

plutôt que de faire des copies d'écran où on ne voit rien,......

Tu pourrais peut être vérifier ton data-value !isNaN(data-value).
Donc dans ta boucle for (var k ....

Code :

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

1
2
var RecupVal = Enfants[k].getAttribute("data-value");
(!isNaN(RecupVal)) ? Totalprice += Integer.pasenInt(RecupVal) : console.log("RecupVal = " + RecupVal + "     k = " + k);

**BROADSIDER** · 31/01/2019, 23h00

Envoyé par Auteur

plutôt que de faire des copies d'écran où on ne voit rien, pourquoi ne pas copier-coller le code à la suite du message ?
Tu as des balises code pour cela (bouton # dans l'éditeur).

C'est fait!

**BROADSIDER** · 31/01/2019, 23h10

Envoyé par ProgElecT

Tu pourrais peut être vérifier ton data-value !isNaN(data-value).
Donc dans ta boucle for (var k ....

Code :

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

1
2
var RecupVal = Enfants[k].getAttribute("data-value");
(!isNaN(RecupVal)) ? Totalprice += Integer.pasenInt(RecupVal) : console.log("RecupVal = " + RecupVal + "     k = " + k);

Je ne sais pas si c'est que j'ai mal placé ton code mais si je le laisse ensuite je ne peux meme plus déplacer mes images dans le conteneur, est ce que le script ne parviens pas a reconnaitre la data value de mon image car je l'a fait apparaitre avec du php? Car pourtant si je fait un controle+u chaque image à bien son data value donc je ne comprend pas ou est l'erreur et pourquoi ce message NaN...

**NoSmoking** · 01/02/2019, 06h39

Bonjour,
sur ton action « drop » tu crées une <img> à laquelle tu affectes la même src et ensuite tu l'ajoutes à ton panier.

Code :

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

1
2
3
4
5
var theitem = document.getElementById(id);		
theitem.className='itemblurred';
var y  = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);

seulement tu ne copies pas tous les attributs et notamment son data-value, il serait préférable de faire dans ce cas un clone.

Code :

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

1
2
3
4
5
6
var theitem = document.getElementById(id);		
theitem.className='itemblurred';
//  var y  = document.createElement('img');
//  y.src = theitem.src;
 var y = theitem.cloneNode( true);
cartArea.appendChild(y);

**BROADSIDER** · 01/02/2019, 06h44

Bonjour Nosmocking,
Effectivement la creation d'un clone me serais parfait merci a toi! Je test ca dans la journée !

**ProgElecT** · 01/02/2019, 08h56

Salut

Code :

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

1
2
3
4
5
6
7
8
var Totalprice = 0;
	for(var k = 0; k < Enfants.length; k++)
	{
		if(Enfants[k].nodeType == 1)
		{      
			var RecupVal = Enfants[k].getAttribute("data-value");
			(!isNaN(RecupVal)) ? Totalprice += Integer.pasenInt(RecupVal) : console.log("RecupVal = " + RecupVal + "     k = " + k);			
			//Totalprice += parseInt(Enfants[k].getAttribute("data-value"));

Cela ne solutionnera pas le problème, mais permettrait de voir dans la console ce que contient RecupVal avant le bug NaN.

**BROADSIDER** · 01/02/2019, 17h30

Un grand merci a toi NoSmocking g mit en place ton code et cela a fonctionné a merveille! Ensuite il ma suffit de mettre en place une (data-value2) et j'ai pu effectuer un double calcul il ne me reste plus qu'a régler le probleme de comment enlever une image une fois qu'elle est dans le conteneur final et tout mes problèmes seront regler ^^. D'ailleurs si quelqu'un a la solution que se soit avec la mise en place d'une <div> poubelle ou de pouvoir remettre l'image a son etat initial sa serais avec grand plaisir que j'ecouterais vos conseil! :-D

Drag & Drop d'images - affichage calcul erroné

JavaScript

Discussions similaires

Partager

Partager