Gestion des boutons pour trouver un nombre

**bahh66** · 24/12/2022, 11h34

Bon, on arrive à la dernière partie du jeu et donc ce sujet fait suite à celui-ci.

Pour permettre à mes élèves de trouver le nombre d'images affichées, je souhaiterais qu'ils puissent faire bouger deux sortes de roue (une pour les dizaines et une pour les unités) avec un affichage un peu comme celui de cette horloge mais un déplacement avec l'aide de la souris (pas de clavier pour mes élèves quand ils sont au tableau)

J'ai plusieurs problèmes :
- créer l'affichage de sortes de cartes avec les chiffres affichés
- pouvoir faire tourner les cartes manuellement (javascript? css?)
- réussir à récupérer la valeur du chiffre affiché (rouge pour les dizaines, bleu pour les unités)
- je récupère 2 variables (dizaine et unité), j'imagine qu'il faut que je créé une variable qui les associe et qui compare à la variable nbrhearts de la fonction populate().

Du coup, j'aimerais commencer par créer l'affichage des cartes avec les chiffres et je n'ai aucune idée de comment faire.

**bahh66** · 26/12/2022, 08h20

En gros dans l'esthétique, j'aimerais quelque chose de ce style mais avec une rotation manuelle et pas automatique.

En revanche, dans le code ci-dessus, je ne vois pas ce que c'est que Haml et Scss.

**bahh66** · 06/01/2023, 08h35

Bon je suis toujours bloqué,
j'ai créé mes cartes avec mes nombres, mais je ne sais :

- comment ne faire apparaitre que celui en cours et un peu celui d'avant et un peu celui d'après
- comment faire en sorte de passer d'une carte nombre à une autre
- comment faire comprendre que la carte affichée correspond à un des chiffres du résultat (dizaine ou unité)

Quelqu'un aurait-il une idée?

**bahh66** · 08/01/2023, 22h57

Bon comme je n'ai pas de réponse,
j'essaie une autre solution peut-être plus accessible (même si moins esthétique)

Je vais essayer de créer des boutons permettant de faire changer l'affichage du nombre des dizaines.

J'ai créé ça, mais j'ai un problème ca n'affiche pas du tout ce que j'imaginais

Peut-être que je ne renvoie pas la bonne valeur avec le inner.html, à moins que je ne récupère pas la bonne avec getElementById

**ProgElecT** · 09/01/2023, 09h11

Salut

inner.html

------> innerHTML

if (nbrAffiche=0) Là tu affectes la valeur 0 à la variable nbrAffiche
Pour comparer il faut écrire ==

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
let nbrAffiche = 0;
function nbrAvant() {
	if (nbrAffiche==0) {
		nbrAffiche=9;
	}else{
		nbrAffiche=nbrAffiche-1;
	}
	document.getElementById("affichage").innerHTML = nbrAffiche;
}
 
function nbrApres() {
	if (nbrAffiche==9) {
		nbrAffiche=0;
	}else{
		nbrAffiche= nbrAffiche+1;
	}
	document.getElementById("affichage").innerHTML = nbrAffiche;
}

**bahh66** · 09/01/2023, 11h50

Merci beaucoup pour ces corrections.

J'ai donc créé l'affichage des dizaines et des unités (code ici)

J'ai 2 questions, une d'ordre esthétique, l'autre d'ordre pratique:

- Je souhaiterais que les 2 images soient au dessus des affichage rouge et bleu pour que ce soit les cases soient compréheznsible par les élèves. Mais je ne sais pas ce que je dois modifier pour que cela fonctionne. Le container? les box? les div?

- Ensuite, à partir des modifications faites par les boutons, j'ai créé une variable resultat=nbrAfficheUni+nbrAfficheDiz*10;. Mais quand je demande l'affichage console.log(resultat); ca ne m'affiche que des 0.
Est-ce que je me suis trompé dans la création de la variable? ou est-ce dans l'affichage? J'ai besoin de cette variable pour que mes élèves cherchent à trouver le résultat des images entourées.

**NoSmoking** · 12/01/2023, 16h55

Bonjour,

Envoyé par bahh66

En revanche, dans le code ci-dessus, je ne vois pas ce que c'est que Haml et Scss.

ce sont des « Preprocessor » HTML et CSS qui permettent d'écrire moins si l'on en connait l'utilisation.
Il te suffit de cliquer sur l'icône ⌵ et de sélectionner View Compiled HTML/CSS pour voir à quoi ressemble le code HTML/CSS généré.

j'essaie une autre solution peut-être plus accessible (même si moins esthétique)

Ce n'est pas l'esthétique qui fait fonctionner ton code, cela ne sert qu'à mieux « vendre » ton produit si celui-ci fonctionne bien sûr

Mais quand je demande l'affichage console.log(resultat); ca ne m'affiche que des 0.

Je reprends ici ton code :

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
let nbrAfficheDiz = 0;
function nbrAvantDiz() {
  if (nbrAfficheDiz == 0) {
    nbrAfficheDiz = 9;
  } else {
    nbrAfficheDiz = nbrAfficheDiz - 1;
  }
  document.getElementById("affichagediz").innerHTML = nbrAfficheDiz;
}
 
function nbrApresDiz() {
  if (nbrAfficheDiz == 9) {
    nbrAfficheDiz = 0;
  } else {
    nbrAfficheDiz = nbrAfficheDiz + 1;
  }
  document.getElementById("affichagediz").innerHTML = nbrAfficheDiz;
}
 
let nbrAfficheUni = 0;
function nbrAvantUni() {
  if (nbrAfficheUni == 0) {
    nbrAfficheUni = 9;
  } else {
    nbrAfficheUni = nbrAfficheUni - 1;
  }
  document.getElementById("affichageuni").innerHTML = nbrAfficheUni;
}
 
function nbrApresUni() {
  if (nbrAfficheUni == 9) {
    nbrAfficheUni = 0;
  } else {
    nbrAfficheUni = nbrAfficheUni + 1;
  }
  document.getElementById("affichageuni").innerHTML = nbrAfficheUni;
}
 
let resultat = nbrAfficheUni + nbrAfficheDiz * 10;

... le calcul ne se fait qu'une seule fois lors de la première interprétation de ton code.

Il te faut refaire le calcul à chaque fois que tu modifies une de tes variables nbrAfficheDiz et/ou nbrAfficheUni.

Il te faut donc créer une fonction de mise à jour, par exemple :

Code :

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

1
2
3
4
function afficheResultat() {
  const elemOutput = document.getElementById("result");
  elemOutput.textContent = nbrAfficheUni + nbrAfficheDiz * 10;
}

... il te faut bien sûr, dans ta page, un élément :

Code html :

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

<output id="result"></output>

... et bien évidement appeler la fonction à chacune des modifications, comme par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
function nbrAvantDiz() {
  if (nbrAfficheDiz == 0) {
    nbrAfficheDiz = 9;
  }
  else {
    nbrAfficheDiz = nbrAfficheDiz - 1;
  }
  document.getElementById("affichagediz").innerHTML = nbrAfficheDiz;
  afficheResultat();
}

Nota : tout ceci est quand même factorisable mais peut-être plus tard !

Voilà pour te permettre de continuer ...

**bahh66** · 12/01/2023, 18h09

le calcul ne se fait qu'une seule fois lors de la première interprétation de ton code.

Il m'a fallu du temps pour m'en rendre compte, mais j'ai fini par y arriver.
J'ai solutionné le problème de mon côté en ajoutant la ligne de code

Code javascript :

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

resultat=nbrAfficheUni+nbrAfficheDiz*10;

dans les fonctions suivantes nbrAvantDiz(), nbrApresDiz(), nbrAvantUni(), nbrApresUni().

J'ai ensuite ajouté le code de cet affichage avec celui du jeu, mais j'ai un problème dans la gestion des couleurs des cercles une fois les deux codes collés.

J'ai posté ici du coup :
https://www.developpez.net/forums/d2...uit-mise-page/

Pour ce qui est de la factorisation de certaines parties du code, j'attends d'abord que le jeu fonctionne.