Discussion :

[jeicko]

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]

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]

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]

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 :






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]

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]

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.