Récupérer prénom enregistré par JavaScript d'une page sur l'autre

Signaler
-
Messages postés
4
Date d'inscription
samedi 16 mai 2020
Statut
Membre
Dernière intervention
20 mai 2020
-
Bonjour,

Je débute en JS et je veux réaliser un site d'exercices interactifs.

Ma question est la suivante.
Je demande à l'utilisateur de renseigner son prénom en première page afin que le message de félicitations à la fin de l'exercice soit plus personnalisé.

Je voudrais que, quand il passe à la page suivante, ce même prénom s'affiche à nouveau à la fin du deuxième exercice pour qu'il soit lui aussi personnalisé.

Voici le code :

<!DOCTYPE html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Latin : Verbe porter indicatif présent</title>
 <meta name="description" content="Le verbe porter indicatif présent. Méthode interactive de latin : testez vos connaissances.">
 
 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <link href="https://fonts.googleapis.com/css2?family=Baloo+Thambi+2&family=Caveat+Brush&display=swap" rel="stylesheet">
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <style type="text/css">
   html
    {
    font-size: 100%
    }
   body
    {
    padding: 1em;
    font-size: .85em;
    font-family: 'Baloo Thambi 2', cursive;
    }
   h1,h2
    {
    max-width:600px;
    margin:0 auto 15px;
    text-align:center;
    font-family: 'Caveat Brush', cursive;
    }
   h1
    {
    font-size:28px;
    color: white;
    background: -webkit-linear-gradient(top left, black, green);
    border-radius: 10px;
    }
   h2
    {
    font-size:18px;
    background:#fff;
    }
   ol, ul, li {
    padding: 0;
    margin: 1em;
    }
   img.displayed {
    border-radius: 25px;
    display: block;
    margin-left: auto;
    margin-right: auto;
   }
   input {
    width: 250px;
    background: burlywood;
    border-radius: 5px;
   }
   label{
    width:100px;
    font-weight:bold;
    margin-right:10px;
    text-align:left;
   }
   form{
    margin:0 auto;
    background: -webkit-linear-gradient(top left, #800080,#FFFFFF);
    background: -o-linear-gradient(bottom right, #800080,#FFFFFF);
    background: linear-gradient(to bottom right, #800080,#FFFFFF);
    border-radius: 25px;
    padding:10px 20px;
    width:75%;
    text-align:center;
    min-width:640px;
   }
   ul{
    padding:0
   }
   li{
    list-style-type:none
   }
   .barre{
    width:100%;
    height:2px;
    background: -webkit-linear-gradient(to right, lightblue,burlywood);
    background: -o-linear-gradient(to right, lightblue, burlywood);
    background: linear-gradient(to right, lightblue, burlywood);
    position:absolute;
    left:0;
    top:75px;
    z-index:-1;
   }
   footer{
    text-align:center;
   }
   </style>

  <script type="text/javascript">

   let saisie = prompt("Votre prénom :");

   function message(erreurs) {
    if (erreurs==0)  {
     alert('Bravo, '+ saisie + ' !') 
    }
    if (erreurs==1)  {
     alert('Pas loin du compte, ' + saisie +' !')
    }
    if (erreurs>=2)  {
     alert('Essaie encore, '+ saisie + ' !')
    }

   }

   function niveauSuivant() {
    if (erreurs==0) {
     self.location = 'vouloirindicatifprésent.html'
    }
    if (erreurs>=1) {
     alert("Réussis déjà ce niveau avant de passer au suivant.")
    }
   }
   function verif() {
      erreurs=0;
      if (form.rep1.value!="fero") erreurs++;
      if (form.rep2.value!="fers") erreurs++;
      if (form.rep3.value!="fert") erreurs++;
      if (form.rep4.value!="ferimus") erreurs++;
      if (form.rep5.value!="fertis") erreurs++;
      if (form.rep6.value!="ferunt") erreurs++;
      message(erreurs);
     }
   

   </script>
 
</head>

<body>

 <header>

  <div class="barre"></div>


  <div class="container">
   <h1><em>Méthode interactive de latin</em></h1>
   <h2>Verbe Fero, is, ferre, tuli, latum Indicatif présent</h2>
  </div>

 </header>
  
  
 <main>

  <div class="container">

   <FORM NAME="form">
    <hr />
     <ul>
     <LI><label>Je porte</label>
     <INPUT NAME="rep1" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
     <LI>
     <label>Tu portes</label> 
     <INPUT NAME="rep2" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
     <LI>
     <label>Il porte</label>
     <INPUT NAME="rep3" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
     <LI>
     <label>Nous portons</label>
     <INPUT NAME="rep4" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
     <LI>
     <label>Vous portez</label>
     <INPUT NAME="rep5" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
     <LI>
     <label>Ils portent</label>
     <INPUT NAME="rep6" TYPE=text SIZE=5 MAXLENGTH=15></INPUT>
     </LI>
    </ul>
    <hr />
    <BR>
    <DIV ALIGN=center>
    <INPUT TYPE=button VALUE="Vérifier" ONCLICK="verif()"></INPUT> 
    </DIV>
     <input type="button" class="bouton" onclick="niveauSuivant();" value="Passer au niveau suivant !">
   </FORM>
 </main>

   <footer>
    <div class="container">
    <p>© Maxime 2020</p>
    </div>
   </footer>

  </body>

 </div>
</html>


Merci beaucoup pour toute aide, quelle qu'elle soit...

3 réponses

Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
bonjour

tu peut utiliser sessionSorage ou localStorage tout depend si tu veut que les donné soient persistantes ou non

rien ne sert de courir il faut partir a point.
cours Forest cours !
Merci de ton intérêt Karamel.

Mais en fait, j'avais déjà testé ce sessionStorage. Cependant, je dois mal programmer car, dans la deuxième page, on me renvoie en félicitations :"Bravo, null !"...

Une idée, peut-être...

Merci en tout cas.
Messages postés
4
Date d'inscription
samedi 16 mai 2020
Statut
Membre
Dernière intervention
20 mai 2020

Salut à toi.

Cela s'appel faire de l'initialisation.

Je n'ai pas lu votre code informatique.

Je suis resté à votre remarque.

C'est comme lier des pages html entre elles dans un même dossier pour faire un site Internet.

Vous mettez votre affirmation de donner un prénom sur la première page.

Vous appliquez la fonction repeat sur la seconde page.



kayotik