Afficher les résultats aléatoires sur page html ->innerHTML

**bouboule22** · 09/03/2018, 00h03

Bonjour,

Je cherche à afficher sur ma page html, les résultats aléatoires de citations formées de morceaux de phrases, on doit choisir un nombre de citations à générer et les citations apparaissent.
J'arrive à afficher une citation mais cela ne fonctionne pas pour plusieurs..
voici une partie de mon code mon js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    randomDebut = citationDebut[Math.floor(Math.random() * citationDebut.length)]; 
    randomMilieu = citationMilieu[Math.floor(Math.random() * citationMilieu.length)]; 
    randomFin = citationFin[Math.floor(Math.random() * citationFin.length)]; 
    var resultat = randomDebut + " "+ randomMilieu + ", "+ randomFin +"\!"; 
   document.getElementById("content" ).innerHTML = resultat; 
  function demarrer(){ 
    var choix = Number(prompt("Tapez 1 pour choisir le générateur n°1 ou tapez 2 pour le générateur n°2" )); 
    var nombre = Number(prompt("Combien de citations souhaitez-vous générer ?tapez entre 1 et 5" )); 
 
    for(i = 0; i < nombre; i++){ 
 	if(i<5){ 
      genererCitation(choix); 
 	}

partie HTML

Code html :

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

1
2
3
4
<body> 
 <div id="content"></div> 
         <p id="submission"><input type="submit" class="submit" value="Lancer" onclick="demarrer();"></input></p> 
    </body>

J'ai besoin de vos lumières, SVP MERCI BEAUCOUP

!!

**danielhagnoul** · 09/03/2018, 09h57

Un exemple vite fait (je manque de temps ce matin), donc perfectible. Les fonctions commençant par la lettre "k" sont dans : Fichier dvjhUtilities-1.5.1.js

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
 
                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
  <script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.1.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const 
                                arCitationDebut = [ "Pierre", "Paul", "Jacques", "François", "Joseph", "Marie" ],
                                arCitationMilieu = [ "a un chat", "a un chien", "a un poisson rouge", "a une tortue", "a un vélo", "a un serpent" ],
                                arCitationFin = [ "il est en bonne santé", "il est malade", "il est mort", "il est décédé", "il est crevé", "il a la pêche" ],
                                elemContent = k$( "#content" ),
                                elemBtnLancer = k$( "#btnLancer" ),
                                genererCitation = ( n ) => {
                                        let
                                                randomDebut = arCitationDebut[ kIntRandom( 0, 5 ) ],
                                                randomMilieu = arCitationMilieu[ kIntRandom( 0, 5 ) ],
                                                randomFin = arCitationFin[ kIntRandom( 0, 5 ) ],
                                                resultat = randomDebut + " " + randomMilieu + ", " + randomFin + " !",
                                                elemChild = document.createElement( "p" );
                                        
                                        elemChild.innerHTML = resultat;
                                                
                                        elemContent.appendChild( elemChild );
                                };
                        
                        elemBtnLancer.addEventListener( "click", ev => { 
                                let
                                        choix = 1,
                                        nombre = Number( prompt( "Combien de citations souhaitez-vous générer ? Tapez un nombre entre 1 et 5." ) ); 
                                
                                nombre = ( nombre < 6 ) ? ( nombre ) : ( 1 );
                                
                                for( let i = 0; i < nombre; i++ ){ 
                                        genererCitation( choix ); 
                                }
                        }, false );
 
                        // fin code du test
                                                
      kIDUnique();
    }, false );
  </script>
</head>
<body>
	<main>
 
		<button id="btnLancer">Lancer</button>
		<div id="content"></div>
 
	</main>
</body>
</html>

**bouboule22** · 09/03/2018, 17h52

Merci infiniment de prendre du temps. !!😊
Je débute, donc ce que tu proposes est un peu compliqué pour moi mais je vais essayer de comprendre !

Afficher les résultats aléatoires sur page html ->innerHTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager