Comparer les id de deux div

Version imprimable

1 pièce(s) jointe(s)

Bonjour tout le monde,

je fais un drag and drop de 6 div vers un autre et je veux comparer les id pour donner un sorte de score à la fin du classement que l'utilisateur fait, mais je sais pas vraiment comment m'y prendre,
le t me renvoie le div à l'interieur d un autre et j'aimerai acceder l'enfant parce que c'est lui qui contient les id pour les comparer
je mets une capture d'ecran
de l'aide svp!!
Merci
Code:

1 2 3 4 5 6 7 8 9 10 11 var tabDeposables = document.querySelectorAll("#deposables>div"); var resultat = [6, 2, 4, 3, 1, 0, 5]; for (var j = 0; j < tabDeposables.length; j++) { var c = document.getElementById("alpha" + j).getAttribute("id") // les éléments glissés var t = tabDeposables[j]; if (t === c) { // le t me renvoie le div à l'interieur d un autre console.log("bravo"); } else { console.log("ca marche pas"); } }
Pièce jointe 521494

03/12/2019, 10h54
javatwister

Bonjour,

pourrais-tu régulariser ta PJ ou donner un peu plus de code, notamment HTML? J'ai l'impression que tabDeposables et c sont identiques;

Voila mon code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
	<section id="glissables">
		<div id="alpha0">Australie</div><!--5-->
		<div id="alpha1">Brésil</div> <!--4-->
		<div id="alpha2">Canada</div><!--1-->
		<div id="alpha3">Chine</div> <!--3-->
		<div id="alpha4">Etats-unis</div> <!--2-->
		<div id="alpha5">Inde</div> <!--6-->
		<div id="alpha6">Russie</div> <!--0-->
	</section>
	<p>Classer les pays ci-dessus par leur superficie, de la plus grande à la plus petite.</p>
	<p>Manipuler par "glisser/déposer" dans les cases ci-dessous.</p>
	<section id="deposables">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div> 
	</section>

avec qqch comme ça, tu te rapproches un peu plus de ce que tu veux faire:
Code:

1 2 3 4 5 6 7 8 9 10 for(var j = 0; j<tabDeposables.length ; j++){ var t = tabDeposables[j]; if(t.firstChild.id.substring(0,-1)==resultat[j]){ console.log("bravo"); } else{ console.log("perdu"); } }
Mais veux-tu tester en direct chaque div déposé ou obtenir un bilan à la fin?

03/12/2019, 11h43
SpaceFrog

En principe dans les bonnes pratiques un id ne dois pas être uniquement numérique ...
Tu pourrais passer par des data- pour cela ...
03/12/2019, 11h50
javatwister

erratum: utilise slice(-1) à la place de substring(0,-1);

@SpaceFrog => ses id ne sont pas numériques, c'est juste le test de comparaison qui en donnait l'impression;

ce qui peut donner finalement

Code:

1
2
3
4
5
6
7
8
tabDeposables.forEach((v,i)=>{
	if(v.firstChild.id.slice(-1)===String(resultat[i])){
		console.log("bravo");	
	}
	else{
		console.log("perdu");
        }
})

Merci bcp pour ton aide, il me reste le changement de couleur et l'affichage du score et c'est fait
Merci encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
for(var j = 0; j<tabDeposables.length ; j++){
						var t = tabDeposables[j];
						if(t.firstChild.id.slice(-1)==resultat[j]){
							//console.log(t);
							console.log("bravo");
							evt.target.style.backgroundColor = "green";
						}
						else{
							console.log("perdu");
							evt.target.style.backgroundColor = "brown";
						}
 
					}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const tabDeposables = document.querySelectorAll("#deposables>div");
const msg_results = document.querySelector("#msg_results");
 
const resultat = [6, 2, 4, 3, 1, 0, 5];
var bonnes_reponses = 0;
for(var j = 0; j<tabDeposables.length ; j++){
  var t = tabDeposables[j];
  if(t.firstChild && t.firstChild.id.slice(-1)==resultat[j]){
    t.style.backgroundColor = "green";
    bonnes_reponses++;
  } else {
    t.style.backgroundColor = "brown";
  }
  if( bonnes_reponses == resultat.length )
  {
    msg_results.textContent = "Bravo, vous avez tout bon !";	
  } else {
    msg_results.textContent = "vous avez "+bonnes_reponses+" bonne(s) réponse(s)";	
  }
}

Code:

<div id="msg_results"></div>

03/12/2019, 12h32
rakima

Merci bcp :-)

Bonjour,
je suis surpris que SpaceFrog, ;), ne vous ait pas proposé une solution à base de regExp qui me semble plus appropriée, .slice(-1) ne prenant en compte que les chiffres [0-9] à l’exclusion donc de 11 ...
Code:

1 2 3 4 5 6 7 const elements = document.querySelectorAll("#deposables > div"); elements.forEach((el, ind) => { const child = el.firstElementChild; if (child) { console.log(ind, child.id, child.id.match(/\d+$/)); } });

03/12/2019, 19h02
javatwister

@NoSmok

bah, c'était pour s'adapter à la demande de rakima ;)
Et tu peux même enlever le $ pour la même raison!

N'empêche, SpaceFrog n'a pas tort pour les data-;
03/12/2019, 19h08
NoSmoking

Citation:

Envoyé par javatwister

Et tu peux même enlever le $ pour la même raison!

c'est juste par précaution.

Citation:

N'empêche, SpaceFrog n'a pas tort pour les data-;

Oui ;)
03/12/2019, 19h10
javatwister

ou alors

Code:

if(t.firstChild.id === "alpha"+resultat[j]){...}