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>