L'ajout de code détruit ma mise en page

Bonjour,

j'ai créé un code avec un jeu sur lequel on clique sur des images et quand on en valide 10 (bouton vérification) la couleur des cercles changent de couleur, si une dizaine n'est pas réalisée, les cercles disparaissent.

Jeu ici
https://codepen.io/cyril-gomez/pen/WNKvqaR

et pour compléter mon affichage sur le jeu, j'ai créé des chiffres que l'on peut choisir voir le code suivant)
https://codepen.io/cyril-gomez/pen/BaPRNVe

Quand j'ai ajouté le code 2 avec le code 1 (j'ai juste copié-collé les éléments), les cercles disparaissent et ne changent plus de couleurs, mais la fonction de ne plus pouvoir sélectionner une image validée reste.
https://codepen.io/cyril-gomez/pen/rNrmjOG?editors=0010

J'ai cherché dans le code où est le conflit, je n'arrive pas à le trouver.

PS: Accessoirement, j'ai aussi un problème d'affichage où tout les éléments sont au milieu de la page et j'aimerais avoir les boutons en haut et la table d'affichage des images en dessous.

Merci par avance de l'aide apportée.

Bonjour,

Citation:

---

Quand j'ai ajouté le code 2 avec le code 1 (j'ai juste copié-collé les éléments), les cercles disparaissent et ne changent plus de couleurs, mais la fonction de ne plus pouvoir sélectionner une image validée reste.

---

Là tu as un problème de compréhension des sélecteur d'attribut :

Code:

---

1 2	const nbrOK = document.querySelectorAll("[class*='diz']").length; const nbrDizaines = nbrOK / 10;

---

Tu récupères tous les éléments qui ont diz dans leur nom de classe, ce qui inclus les éléments comme <div class="boxdiz">. Tu te retrouves, au départ, avec donc 1/10 = .1 et par conséquent un nom de classe valant diz1.1 et non diz1.
Il te faut donc choisir un sélecteur plus judicieux/pertinent ou changer le nom de tes classes.

Voir : Sélecteurs d'attribut

Citation:

---

Accessoirement, j'ai aussi un problème d'affichage

---

ce n'est pas accessoire c'est presque du n'importe quoi avec usage et abus de modèle de boîte FLEX et GRID. J'aurais tendance à dire commence par tous les supprimer pour repartir sur une base saine !

La réalisation d'un schéma, sur papier, n'est pas forcément une mauvaise chose pour appréhender au mieux la mise en page en positionnant les différents blocs, n'hésite pas à utiliser des feutres de couleur.

Je n'ai pas dit que tu ne dois pas utiliser de modèle de boîte FLEX ;)

En effet, je n'avais pas fait attention que mon sélecteur prenait plus que ce que je souhaitais.
du coup j'ai modifié le nom des classes pour plus de simplicité (pour moi en tout cas)

Merci