Sujet Précédent Sujet Suivant

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

Maxime - Modifié le 11 avril 2020 à 17:56
kayotik_8171 Messages postés 6 Date d'inscription samedi 16 mai 2020 Statut Membre Dernière intervention 7 décembre 2020 - 16 mai 2020 à 16:31

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...

A voir également:

Récupérer prénom enregistré par JavaScript d'une page sur l'autre
Récupérer données json (javascript) - Conseils pratiques -Javascript
Exemple de page d'authentification - Conseils pratiques -PHP
Javascript poo - Conseils pratiques -Javascript
Vba récupérer valeur cellule d'une autre feuille - Forum VBA Office (Excel, Word ...)
Php reload page ✓ - Forum PHP

3 réponses

Réponse 1 / 3

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié le 11 avril 2020 à 18:02

bonjour

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

Réponse 2 / 3

Maxime
11 avril 2020 à 18:26

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.

Réponse 3 / 3

kayotik_8171 Messages postés 6 Date d'inscription samedi 16 mai 2020 Statut Membre Dernière intervention 7 décembre 2020
16 mai 2020 à 16:31

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

Discussions similaires

Tutoriels et javascript pour tirage de cartes sur internet

Comment recuperer le dernier enregistrement d'une table en sql

[vba] aller chercher des données dans une feuille excel

Prendre la valeur d'une cellule dans excel avec vba

ne pas y avoir le prénom et nom qui se répéte

Votre réponse

Discussions similaires