Bouton retour en arrière

**jeicko** · 13/03/2021, 00h40

Bonjour,

Je possède un script qui me permet de générer aléatoirement des prénoms prédéfinie après un clique. A chaque nouveau clique, un nouveau prénom de la liste apparait aléatoirement

Je souhaiterais qu'au défilement des prénoms, je puisse revenir sur les prénoms précédents si j'ai cliqué trop rapidement.

Existe t'il un moyen d'implementer ça à mon script ou est-ce que le script devrait être complètement different, comme une liste par exemple.

Je precise que je suis novice en javascript.

Merci

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
const firstnames = {
  girl: ['Adèle', 'Agathe', 'Albane'],
  boy: ['Aaron', 'Achille', 'Adam'],
  retrosg: ['Aaron', 'Abélard', 'Achille'],
  bibliquesg: ['Aaron', 'Abel', 'Abraham'],
  celestesg: ['Ange', 'Angel', 'Arwen'],
  originauxg: ['Abélard', 'Achil', 'Adame'],
  composesg: ['Ange-Marie', 'Charles-Edmond', 'Charles-Elie'],
  mondeg: ['Akamu', 'Akoni', 'Anakoni'],
  raresg: ['Achille', 'Adamo', 'Adams'],
  retrosf: ['Adèle', 'Adélie', 'Aglaé'],
  bibliquesf: ['Abigaïl', 'Adam', 'Anabel'],
  celestesf: ['Alva', 'Alya', 'Amaya'],
  originauxf: ['Abby', 'Achille', 'Adame'],
  composesf: ['Abby-Gaelle', 'Abby-Gaëlle', 'An-Sophie'],
  mondef: ['Aanui', 'Aelan', 'Ailani'],
  raresf: ['Abby', 'Abbygael', 'Abbygaëlle']
}
 
let firstnames2 = {
  girl: [...firstnames.girl],
  boy:  [...firstnames.boy],
  retrosg: [...firstnames.retrosg],
  bibliquesg: [...firstnames.bibliquesg],
  celestesg: [...firstnames.celestesg],
  originauxg: [...firstnames.originauxg],
  composesg: [...firstnames.composesg],
  mondeg: [...firstnames.mondeg],
  raresg: [...firstnames.raresg],
  retrosf: [...firstnames.retrosf],
  bibliquesf: [...firstnames.bibliquesf],
  celestesf: [...firstnames.celestesf],
  originauxf: [...firstnames.originauxf],
  composesf: [...firstnames.composesf],
  mondef: [...firstnames.mondef],
  raresf: [...firstnames.raresf]
}
 
const formGenerateFirstname = document.querySelectorAll('.generate_firstname')
 
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}
 
formGenerateFirstname.forEach((formEl) => {
  const gender = formEl.dataset.gender
  const inputEl = formEl.querySelector(`[name="${gender}_firstname"]`)
  const btn = formEl.querySelector('button');
 
  btn.addEventListener('click', (e) => {
    e.preventDefault()
 
    const selectFirstnames = firstnames2[gender];
    const random = getRandomInt(0, selectFirstnames.length);
 
    inputEl.value = selectFirstnames[random];
    firstnames2[gender] = firstnames2[gender].filter(name=> name != selectFirstnames[random]);
 
    if(firstnames2[gender].length == 0)
      firstnames2[gender] = [...firstnames[gender]];
  })
})

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form
  action="#"
  method="post"
  class="generate_firstname c-generateur"
  data-gender="girl"
>
  <div class="resultat">
    <input class="resultat2" type="text" name="girl_firstname" />
  </div>
 
  <button type="button" class="h-generateur">Clique-moi !</button>
</form>

**mathieu** · 13/03/2021, 07h58

vous voulez ajouter un bouton "précédent" qui montre le résultat précédent ?
pour cela vous pouvez garder votre code actuel et mettre les résultats dans une liste.

j'ai une remarque au sujet de l'initialisation de firstnames2, vous pouvez cloner l'autre tableau comme cela : let firstnames2 = {...firstnames};
ensuite dans votre code vous utilisez seulement un morceau de firstnames2. donc si votre code reste comme cela, il serai plus optimisé de ne pas cloner le tableau firstnames en entier.

**javatwister** · 13/03/2021, 09h33

Bonjour,

En gros, tu veux un historique du tirage...

http://javatwist.imingo.net/histonoms.htm

(Je n'ai pas pris en compte la non répétition des prénoms mais je ne sais pas ce que tu veux faire exactement.)

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>...</title>
</head>
 
<body>
 
<div>
	<input type="button" id="back" value="retour" />
	<input type="button" id="alea" value="choix" />
	<input type="button" id="next" value="avance" />
	<input type="text" id="choix" />
</div>
<div id="histo"></div>
<script>
 
document.addEventListener("DOMContentLoaded",()=>{
 
        let cat, nom;
        const t=[];
        const firstnames = {
          girl: ['Adèle', 'Agathe', 'Albane'],
          boy: ['Aaron', 'Achille', 'Adam'],
          retrosg: ['Aaron', 'Abélard', 'Achille'],
          bibliquesg: ['Aaron', 'Abel', 'Abraham'],
          celestesg: ['Ange', 'Angel', 'Arwen'],
          originauxg: ['Abélard', 'Achil', 'Adame'],
          composesg: ['Ange-Marie', 'Charles-Edmond', 'Charles-Elie'],
          mondeg: ['Akamu', 'Akoni', 'Anakoni'],
          raresg: ['Achille', 'Adamo', 'Adams'],
          retrosf: ['Adèle', 'Adélie', 'Aglaé'],
          bibliquesf: ['Abigaïl', 'Adam', 'Anabel'],
          celestesf: ['Alva', 'Alya', 'Amaya'],
          originauxf: ['Abby', 'Achille', 'Adame'],
          composesf: ['Abby-Gaelle', 'Abby-Gaëlle', 'An-Sophie'],
          mondef: ['Aanui', 'Aelan', 'Ailani'],
          raresf: ['Abby', 'Abbygael', 'Abbygaëlle']
        }
 
        document.querySelector("#alea").addEventListener("click",()=>{
                cat=Object.keys(firstnames)[Math.floor(Math.random()*Object.keys(firstnames).length)];
                nom=firstnames[cat][Math.floor(Math.random()*firstnames[cat].length)];
                t.push(nom);
                document.querySelector("#choix").value=nom;
                document.querySelector("#histo").textContent=t.join(", ");
                })
 
        document.querySelector("#back").addEventListener("click",()=>{
                if(t.lastIndexOf(nom)>0){
                        document.querySelector("#choix").value=t[t.lastIndexOf(nom)-1];
                        nom=document.querySelector("#choix").value
                }
        })
        
        document.querySelector("#next").addEventListener("click",()=>{
                if(t.lastIndexOf(nom)<t.length-1){
                        document.querySelector("#choix").value=t[t.lastIndexOf(nom)+1];
                        nom=document.querySelector("#choix").value
                }
        })
 
})
</script>
 
</body>
</html>

**jeicko** · 13/03/2021, 12h08

Merci pour vos 2 réponses

Mathieu : A la base c'est effectivement un bouton "précédent" que je voulais mettre en place. Et je te remercie pour la remarque.

Javatwister : Ta proposition d'historique est top pour ce que je veux faire, je n'avais pas eu l'idée de pouvoir faire un avant-arrière. Je vais me lancer dans ton idée en essayant de prendre en compte la non répétition des prénoms sans péter tout le code, sachant que j'ai un bouton different pour chaque catégorie de prenom..

Je ne mets pas le sujet en résolu tout de suite car je sens que je vais patauger un peu

Je vous mets des captures d'écran pour que mon projet soit plus clair :

Nom : fille.png
Affichages : 127
Taille : 620,0 Ko

Nom : fille.png
Affichages : 127
Taille : 620,0 Ko

Nom : garcon.png
Affichages : 130
Taille : 644,6 Ko

La fleche gauche correspondrait à l'historique en arrière
La flèche droite correspondrait à l'historique en avant
Le bouton "clique-moi" correspondrait au "choix"

Le tout classé par catégorie garçon / fille par thème

**mathieu** · 13/03/2021, 12h39

votre capture d'écran m'a donné une autre idée : au chargement de la page, vous mélangez aléatoirement la liste des prénoms et ensuite avec les flèches gauche et droite, vous vous promenez dans la liste mélangée.

**jeicko** · 13/03/2021, 12h52

C'est une très bonne idée aussi.. Mais je ne suis pas capable de tout refaire, j'ai peu de notion en javascript.
Et je me pose une question, est-ce que l'utilisateur aura le réflexe de cliquer sur la flèche de droite alors que de base la case des résultats est vide. Il faudrait que je repense tout le code, le niveau est trop poussé pour pour moi je crois.

**mathieu** · 13/03/2021, 13h16

dans votre code du 1er message, vous utilisez déjà des listes et la gestion des clics sur un bouton. donc vous avez déjà toutes les notions pour faire cela.
après la question est de savoir combien de temps vous avez. si vous devez terminer cela pour lundi prochain à 08 h 32, je comprend que vous n'ayez pas envie de recommencer le code, mais si vous prenez le temps, on pourra vous aider à avancer.

**jeicko** · 13/03/2021, 13h54

Je n'ai pas de délai c'est un projet personnel.
Si je suis votre idée (qui laisserait simplement les 2 flèches et supprimerait le bouton "clique-moi"), il serait possible qu'au chargement de la page un premier prénom apparaisse déjà dans la case ?

**javatwister** · 13/03/2021, 18h21

Ok ok;
J'ai tout de même un peu de mal avec le principe d'un affichage aléatoire concernant 3 prénoms...; autant les faire défiler à la flèche, comme le note mathieu!

**jeicko** · 13/03/2021, 18h33

J'ai mis 3 prénoms pour que le code soit plus court sur le forum, en réalité il y a environ 150 prénoms par catégorie et par genre, donc environ 2400 prénoms

**javatwister** · 13/03/2021, 18h41

Ok
Mais pour la "non répétition", tu vois ça comment? Au bout d'un moment, l'affichage s'arrête?

**jeicko** · 13/03/2021, 18h55

Quand tous les prénoms sont passés en revu, (sans qu'on puisse tomber 2 fois sur le même) elle reprendrait à 0 comme si la liste était sans fin.

En gros on passe en revu les 150 prénoms aléatoirement sans tomber 2 fois sur le même puis on recommence à l'infini

**javatwister** · 14/03/2021, 09h59

L'idée est de trier tes tableaux dès le départ. Comme ça, en cliquant gauche ou droite, tu fais défiler sans nouveau tirage;

http://javatwist.imingo.net/histonoms.htm
(pour le design, voir avec mon avocat)

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>...</title>
<style>
h3{text-align:center;}
.flex{display:flex;justify-content:center;}
.flex div{min-width:200px;text-align:center;}
.flex button{margin-left:50px;margin-right:50px;width:100px;}
#f hr {width:200px;margin-top:50px;}
</style>
</head>
 
<body>
<div id="f">
</div>
<script>
 
document.addEventListener("DOMContentLoaded",()=>{
 
        const firstnames = {
          girl: ['Adèle', 'Agathe', 'Albane'],
          boy: ['Aaron', 'Achille', 'Adam'],
          retrosg: ['Aaron', 'Abélard', 'Achille'],
          bibliquesg: ['Aaron', 'Abel', 'Abraham'],
          celestesg: ['Ange', 'Angel', 'Arwen'],
          originauxg: ['Abélard', 'Achil', 'Adame'],
          composesg: ['Ange-Marie', 'Charles-Edmond', 'Charles-Elie'],
          mondeg: ['Akamu', 'Akoni', 'Anakoni'],
          raresg: ['Achille', 'Adamo', 'Adams'],
          retrosf: ['Adèle', 'Adélie', 'Aglaé'],
          bibliquesf: ['Abigaïl', 'Adam', 'Anabel'],
          celestesf: ['Alva', 'Alya', 'Amaya'],
          originauxf: ['Abby', 'Achille', 'Adame'],
          composesf: ['Abby-Gaelle', 'Abby-Gaëlle', 'An-Sophie'],
          mondef: ['Aanui', 'Aelan', 'Ailani'],
          raresf: ['Abby', 'Abbygael', 'Abbygaëlle']
        },
        h=document.createElement("h3"),
        d=document.createElement("div"),
        b=document.createElement("button"),
        hr=document.createElement("hr");
 
        for(i in firstnames){
                let titre=h.cloneNode();
                titre.textContent=i;
                
                let cadre=d.cloneNode();
                let previous=b.cloneNode();
                previous.textContent="previous";
                let next=b.cloneNode();
                next.textContent="next";
                let choix=d.cloneNode();
                
                firstnames[i].sort((a,b)=>Math.random() - 0.5);
                let tab=i;
                let rg=0;
                choix.textContent=firstnames[tab][rg];
                f.append(titre);
                
                cadre.classList.add("flex");
 
                cadre.append(previous);
                cadre.append(choix);
                cadre.append(next);
 
                document.querySelector("#f").append(cadre);
                document.querySelector("#f").append(hr.cloneNode());
 
                next.addEventListener("click",()=>{
                        rg<firstnames[tab].length-1 ? rg++ : rg=0;
                        choix.textContent=firstnames[tab][rg];
                })
                previous.addEventListener("click",()=>{
                        rg>0 ? rg-- : rg=firstnames[tab].length-1;
                        choix.textContent=firstnames[tab][rg];
                })
 
        }
 
})
</script>
 
</body>
</html>

**jeicko** · 14/03/2021, 12h40

Merci d'avoir pris le temps de refaire tout le code. Je ne pensais pas qu'on m'aiderait autant. Ce que tu as fait est parfait pour mon projet.

J'ai juste quelques points qui ne sont pas clairs pour moi pour que je puisse intégrer ton travail au mien.

J'avais commencé à travailler sur un formulaire qui contient 2 boutons (non fonctionnels) pour y mettre mes flèches.
Sachant que j'utilise 1 formulaire par catégorie de prénom et par genre, donc 16 formulaires différents. J'ai fait ça en tenant compte de mon ancien code pour différencier les catégories et les genres.

Toi tu utilises une div pour toutes les catégories.

Dois-je travailler sur une copie du tableau ?

Ou je fais fausse route avec mes boutons et une éventuelle copie du tableau ?

Exemple d'un formulaire pour la catégorie "raresf" :

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
15
16
17
18
19
20
21
22
23
24
25
<!-- Fille -->
        <article class="color-f" id="prenoms-rares-fille">
          <h2 class="centrer-titre">Prénoms rares</h2>
          <h3 class="centrer-titre">Fille</h3>
 
          <!-- Générateur Prénom Fille "rares"-->
          <form
            action="#"
            method="post"
            class="generate_firstname c-generateur"
            data-gender="raresf"
          >
            <div class="resultat">
              <input class="resultat2" type="text" name="raresf_firstname" />
            </div>
 
 
 
            <div class="fleches-gen">
              <button type="button"><img class="fleche-gen-g" src=images/fleche-g.png alt="flèche prénom précendant"></button><button type="button"><img class="fleche-gen-d" src=images/fleche-d.png alt="flèche prénom suivant"></button>
            </div>
 
 
 
          </form>

**javatwister** · 14/03/2021, 13h03

16 formulaires sur une page, ce n'est pas logique;
mais pas de problème pour remplacer de simples div par des form;

Donc, à un moment, l'utilisateur soumet son choix?

**jeicko** · 14/03/2021, 13h29

Effectivement.. ta remarque est pertinente

**javatwister** · 14/03/2021, 13h39

bref, pourquoi soumets-tu? Tu donnes un historique du prénom, un truc comme ça?
En tout cas, tu n'as besoin que d'un formulaire.
Par contre il te faudrait certainement un bouton submit par série de prénoms, pour des raisons d'ergonomie;

**jeicko** · 14/03/2021, 13h53

Si je duplique simplement deux div et le script de cette manière ? j'image que je mérite la correctionnelle..

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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>...</title>
<style>
h3{text-align:center;}
.flex{display:flex;justify-content:center;}
.flex div{min-width:200px;text-align:center;}
.flex button{margin-left:50px;margin-right:50px;width:100px;}
#girl hr {width:200px;margin-top:50px;
}
#boy hr {width:200px;margin-top:50px;
}
</style>
</head>
 
<body>
 
<div id="girl">
</div>
 
<div id="boy">
</div>
 
<script>
 
document.addEventListener("DOMContentLoaded",()=>{
 
        const firstnames = {
          girl: ['Adèle', 'Agathe', 'Albane']
        },
        h=document.createElement("h3"),
        d=document.createElement("div"),
        b=document.createElement("button"),
        hr=document.createElement("hr");
 
        for(i in firstnames){
                let titre=h.cloneNode();
                titre.textContent=i;
                
                let cadre=d.cloneNode();
                let previous=b.cloneNode();
                previous.textContent="previous";
                let next=b.cloneNode();
                next.textContent="next";
                let choix=d.cloneNode();
                
                firstnames[i].sort((a,b)=>Math.random() - 0.5);
                let tab=i;
                let rg=0;
                choix.textContent=firstnames[tab][rg];
                girl.append(titre);
                
                cadre.classList.add("flex");
 
                cadre.append(previous);
                cadre.append(choix);
                cadre.append(next);
 
                document.querySelector("#girl").append(cadre);
                document.querySelector("#girl").append(hr.cloneNode());
 
                next.addEventListener("click",()=>{
                        rg<firstnames[tab].length-1 ? rg++ : rg=0;
                        choix.textContent=firstnames[tab][rg];
                })
                previous.addEventListener("click",()=>{
                        rg>0 ? rg-- : rg=firstnames[tab].length-1;
                        choix.textContent=firstnames[tab][rg];
                })
 
        }
 
})
</script>
 
 
<script>
 
        document.addEventListener("DOMContentLoaded",()=>{
         
                const firstnames = {
                 
                  boy: ['Aaron', 'Achille', 'Adam']
                },
                h=document.createElement("h3"),
                d=document.createElement("div"),
                b=document.createElement("button"),
                hr=document.createElement("hr");
         
                for(i in firstnames){
                        let titre=h.cloneNode();
                        titre.textContent=i;
                        
                        let cadre=d.cloneNode();
                        let previous=b.cloneNode();
                        previous.textContent="previous";
                        let next=b.cloneNode();
                        next.textContent="next";
                        let choix=d.cloneNode();
                        
                        firstnames[i].sort((a,b)=>Math.random() - 0.5);
                        let tab=i;
                        let rg=0;
                        choix.textContent=firstnames[tab][rg];
                        boy.append(titre);
                        
                        cadre.classList.add("flex");
         
                        cadre.append(previous);
                        cadre.append(choix);
                        cadre.append(next);
         
                        document.querySelector("#boy").append(cadre);
                        document.querySelector("#boy").append(hr.cloneNode());
         
                        next.addEventListener("click",()=>{
                                rg<firstnames[tab].length-1 ? rg++ : rg=0;
                                choix.textContent=firstnames[tab][rg];
                        })
                        previous.addEventListener("click",()=>{
                                rg>0 ? rg-- : rg=firstnames[tab].length-1;
                                choix.textContent=firstnames[tab][rg];
                        })
         
                }
         
        })
        </script>
 
</body>
</html>