Gestion des couleurs en fonction d'une classe

Version imprimable

Bonjour,

ce sujet fait suite à celui-ci.

Le code créé jusqu'à présent est celui-ci : https://codepen.io/cyril-gomez/pen/zYLOXwq.

Pour l'instant, les images cliquées ont un cercle de couleur rouge (application du css sur la classe picCliked), celles déjà comptées (dizaine réussie) ont un cercle vert (application du css sur la classe imgSaved).

Je souhaiterais que la couleur du cercle puisse changer à chaque dizaine afin que mes élèves puissent mieux voir les différentes dizaines réalisées.

Un exemple :

sélection des images : rouge
1ère dizaine : vert
2ème dizaine : bleu
3ème dizaine : orange
....
9ème dizaine : jaune.

Dans le code, c'est le changement de classe qui engendre le changement de couleur.
Code:

1 2 3 4 5 6 7 8 if(10 === nbrverif){ picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées for (const picclicked of picsclicked) { picclicked.classList.remove("picClicked"); // on leur retire tous la class picCliked} picclicked.classList.add("imgSaved"); picclicked.onclick = {/* void function */}; nbrverif=0; }
Est-il possible de mettre une classe imgSaved[i] avec i variant de 1 à 9? (Je me rends compte que ce n'est peut-être pas une gestion du css mais du javascript)
Sinon comment puis-je faire comprendre que je veux changer de couleur sans reprendre le code à zéro?

Merci par avance.

23/12/2022, 18h19
NoSmoking
Bonjour,
tu peux tout à fait créer des classes suivants la dizaine en cours, celle-ci étant à gérer côté JavaScript.
Code:

1 2 3 4 5 6 7 8 9 .dizaine-1 { /* tu mets ce que tu veux */ } .dizaine-2 { /* tu mets ce que tu veux */ } .dizaine-3 { /* tu mets ce que tu veux */ }
Voilà une façon de faire !
23/12/2022, 18h34
bahh66

Alors en effet, c'est côté javascript que je bloque car en effet, j'avais prévu de faire ça côté css.

J'ai créé un code qui fonctionne mais il est moche.

Code:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
function verifier() {
  dizaine1 = document.querySelectorAll('.diz1').length;
  dizaine2 = document.querySelectorAll('.diz2').length;
  dizaine3 = document.querySelectorAll('.diz3').length;
   dizaine4 = document.querySelectorAll('.diz4').length;
   dizaine5 = document.querySelectorAll('.diz5').length;
   dizaine6 = document.querySelectorAll('.diz6').length;
   dizaine7 = document.querySelectorAll('.diz7').length;
   dizaine8 = document.querySelectorAll('.diz8').length;
   dizaine9 = document.querySelectorAll('.diz9').length;
    nbrdizaines = dizaine1+dizaine2+dizaine3+dizaine4+dizaine5+dizaine6+dizaine7+dizaine8+dizaine9;
    if(10 === nbrverif){
      picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
      if (nbrdizaines===0) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz1");
    picclicked.onclick = { };
    nbrverif=0;
        }}
      if (nbrdizaines===10) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz2");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===20) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz3");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===30) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz4");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===40) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz5");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===50) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz6");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===60) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz7");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===70) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz8");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
            if (nbrdizaines===80) {
        for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("diz9");
    picclicked.onclick = { };
    nbrverif=0;
        } 
      }
 /* for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("imgSaved");
    picclicked.onclick = { };
    nbrverif=0;
*/
      msg = "Bravo, dizaine réalisée";
        document.getElementById("success").innerHTML = msg;
      // on se place sur le buffer suivant
      //indexBuffer += 1;
      }
 
    else {
      picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
  for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
  nbrverif=0;
}
 
      msg = "Cela ne fait pas une dizaine";
  document.getElementById("success").innerHTML = msg;
}
}

En fait je vérifie la longueur des images sauvées et je réattribue à la bonne classe.

Citation:

J'ai créé un code qui fonctionne mais il est moche.

Je confirme, tu aurais pu faire un minimum de factorisation :mrgreen:

Ceci étant il y a plus simple pour récupérer le nombre de dizaines traitées en utilisant un sélecteur d'attribut
Code:

1 2 3 4 // voir : Sélecteurs ciblant une sous-chaîne // https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors#s%C3%A9lecteurs_ciblant_une_sous-cha%C3%AEne const nbrOk = document.querySelectorAll("[class*='diz']").length; const nbrDizaines = nbrOK / 10;
Voir : Sélecteurs ciblant une sous-chaîne

Je déplace vers le forum JavaScript pour la suite

24/12/2022, 08h41
bahh66

Est-il possible de factoriser les déclarations et les if?
Car en effet, il y a énormément de répétition.

https://codepen.io/cyril-gomez/pen/WNKvqaR?editors=0010

Allez cadeau pour les fêtes ;)

Code:

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
function verifier() {
  const nbrOK = document.querySelectorAll("[class*='diz']").length;
  const nbrDizaines = nbrOK / 10;
  const picsclicked = document.querySelectorAll(".picClicked");
  let msg = "...";
 
  if (10 === nbrverif) {
    msg = "Bravo, dizaine réalisée";
    // class à appliquer
    const nomClass = "diz" + (nbrDizaines + 1);
    for (const picclicked of picsclicked) {
      picclicked.classList.remove("picClicked");
      picclicked.classList.add(nomClass);
      // ou directement : picclicked.classList.replace("picClicked", nomClass);
      picclicked.onclick = {};
    }
  }
  else {
    msg = "Cela ne fait pas une dizaine";
    for (const picclicked of picsclicked) {
      picclicked.classList.remove("picClicked");
    }
  }
 
  nbrverif = 0;
  document.getElementById("success").innerHTML = msg;
}

24/12/2022, 09h53
bahh66

Merci beaucoup.
Et j'apprécie grandement le cadeau.