Récupération de données entre pages HTML

Résolu/Fermé

Raviolito - 18 avril 2021 à 00:02
Raviolito - 18 avril 2021 à 21:34

Bonsoir, sur chaque pages de mon site j'ai un bandeau pour customiser la couleur du fond. Le problème est que lors d'un changement de page la customisation ne s'enregistre pas.
J'ai vu que l'utilisation de cookie était envisageable, mais je n'ai aucune idée de comment faire avec mon code.

Voici ma partie javascript pour changer la couleur du fond et la typo.


<script>

            function changeColor(color) {
                document.body.style.background = color;


            }
            function changeColor2(color) {

                document.body.style.color = color;
            }


</script>

Et voici ma partie HTML où l'utilisateur choisi sa couleur via des boutons.


<button onclick = "changeColor('black'); changeColor2('gainsboro');"></button>
        <button onclick = "changeColor('MidnightBlue'); changeColor2('gainsboro');"></button>
        <button onclick = "changeColor('black'); changeColor2('firebrick');"></button>
        <button onclick = "changeColor('gainsboro'); changeColor2('black')"></button>

Merci de votre réponse.

A voir également:

Récupération de données entre pages HTML
Logiciel de récupération de données - Guide
Supprimer des pages sur word - Guide
Editeur html - Télécharger - HTML
Récupération de compte google - Guide
Effacer les données de navigation - Guide

4 réponses

Réponse 1 / 4

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
18 avril 2021 à 00:05

Bonjour
Plutôt que d'utiliser les cookies
Je t'invite à utiliser le localstorage.
Tu trouveras, sans aucune difficulté, des tutoriels qui t'explique rond comment l'utiliser. ( Je précise que c'est très simple )

Raviolito
18 avril 2021 à 15:22

Merci pour votre suggestion, malheureusement je ne parviens pas à l'utiliser.
Pourriez vous m'aider d'avantage?

Voila ce que j'ai essayé de faire, sans réel succès...


function theme(){
  var theme = localStorage.getItem('color')
}

function changeColor(color) {
  document.body.style.background = color;
  localStorage.setItem('color');
}

function changeColor2(color) {
  document.body.style.color = color;
}

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649 > Raviolito
18 avril 2021 à 17:40

A quel moment utilises tu la variable theme ?

Réponse 2 / 4

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
18 avril 2021 à 18:13

En plus, ton code n'est pas terrible.
pourquoi dupliquer du code, alors qu'il suffit de passer un paramètre.

Donc :
côté html

<button onclick = "changeColor('black','gainsboro');"></button>
<button onclick = "changeColor('MidnightBlue','gainsboro');"></button>
<button onclick = "changeColor('black,'firebrick');"></button>
<button onclick = "changeColor('gainsboro','black')"></button>

function changeColor(bgcolor,fontcolor) {
  document.body.style.background = bgcolor;
  document.body.style.color = fontcolor;
  localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé);
  localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé);

}

et pour recharger les couleurs déjà sauvegardées

//code qui s'executera lorsque la page sera finie de charger
(function(){
   document.body.style.background = localStorage.getItem('bgcolor');
    document.body.style.color = localStorage.getItem('fontcolor');
})();

Réponse 3 / 4

Raviolito
18 avril 2021 à 20:39

Effectivement il n'était pas optimisé...

Le localstorage fonctionne, par contre quand je rentre la dernière fonction pour récupérer les données, les boutons ne fonctionnent plus.

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
18 avril 2021 à 20:42

Sans voir exactement ce que tu as codé impossible de te répondre...

Nb: avant de poster ton code, merci de lire entièrement le contenu du lien suivant
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.

Réponse 4 / 4

Raviolito
18 avril 2021 à 21:04

Voici mon code.


<!DOCTYPE html>
<html>

<head>
    <title>COULEUR</title>
    <meta charset="utf-8" />
<link rel="icon" href="ico.gif" type="image/gif">

<style>

.font{
  font-family:sans-serif;
  font-variant: small-caps;
}
              .BandeMenuHaut {
               border-bottom: 1px solid ;
               display: block;
               height: 50px;
               width: 100%;
               position: fixed;
               margin-top: 0px;
               top: 0px;
               left: 0px;
               right: 0px;
              }

             .custom {
               border-right: 1px  solid ;
               border-left: 1px  solid ;
               display: block;
               height: 50px;
               width: 33.3333%;
               position: fixed;
               margin-top: 0px;
               top: 0px;
               left: 33.3%;
               right: 0px;
             }

             .text_custom{
               display: flex;
               justify-content: space-around;
               font-size: 15px;
               z-index: 2;
               margin-left:33.3333%;
               margin-right:33.3333%;
               font-family: monospace;
             }

             .zone_custom{
               display: flex;
               justify-content: space-around;
               z-index: 1;
             }

             .case_custom{
               display: flex;
               justify-content: space-around;
             }

             .trait_custom_1{
               border-right: 1px  solid ;
               border-left: 1px  solid ;
               display: block;
               width: 8.3333%;
               height: 50px;
               position: fixed;
               margin-top: 0px;
               top: 0px;
               left: 33.3%;
               right: 0px;
               z-index: 0;
             }

             .trait_custom_2{
               border-right: 1px  solid ;
               display: block;
               width: 8.3333%;
               height: 50px;
               position: fixed;
               margin-top: 0px;
               top: 0px;
               left: 41.7%;
               right: 0px;
             }

             .trait_custom_3{
               border-right: 1px  solid ;
               display: block;
               width: 8.3333%;
               height: 50px;
               position: fixed;
               margin-top: 0px;
               top: 0px;
               left: 50%;
               right: 0px;
             }

button{
  background: none;
  opacity: 50%;
  color: none;
  border: none;
  outline-style: none;
  width: 157px;
  height: 50px;
  cursor:pointer;
}

</style>

<script>

function changeColor(bgcolor,fontcolor) {
  document.body.style.background = bgcolor;
  document.body.style.color = fontcolor;
  localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé);
  localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé);
}

</script>

</head>

<body>

<div class="font">
<div class="BandeMenuHaut">
<div class="text_custom">
  <p>noir</p>
  <p>bleu</p>
  <p>rouge</p>
  <p>gris</p>
</div>
    <div class="custom">
      <div class="case_custom">
        <div class="trait_custom_1"></div>
        <div class="trait_custom_2"></div>
        <div class="trait_custom_3"></div>
      </div>
      <div class="zone_custom">
        <button onclick = "changeColor('black','gainsboro');"></button>
        <button onclick = "changeColor('MidnightBlue','gainsboro');"></button>
        <button onclick = "changeColor('black','firebrick')"></button>
        <button onclick = "changeColor('gainsboro','black')"></button>
      </div>
    </div>
</div>

</body>

</html>

jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024 4 649
18 avril 2021 à 21:23

Et bien ... qu'est-ce qu'il a ce code ?
Il fonctionne très bien...

par contre, le Javascript .. on le place à la fin du code avant le </body>

Le mettre dans le head ... c'est à l'ancienne ... quand on codait il y a 15 ans...

Donc, si on remet le code dans le bon sens


<!DOCTYPE html>
<html>  
  <head>
    <title>COULEUR</title>
    <meta charset="utf-8" />
    <link rel="icon" href="ico.gif" type="image/gif">

    <style>

    .font{
      font-family:sans-serif;
      font-variant: small-caps;
    }
                  .BandeMenuHaut {
                   border-bottom: 1px solid ;
                   display: block;
                   height: 50px;
                   width: 100%;
                   position: fixed;
                   margin-top: 0px;
                   top: 0px;
                   left: 0px;
                   right: 0px;
                  }

                 .custom {
                   border-right: 1px  solid ;
                   border-left: 1px  solid ;
                   display: block;
                   height: 50px;
                   width: 33.3333%;
                   position: fixed;
                   margin-top: 0px;
                   top: 0px;
                   left: 33.3%;
                   right: 0px;
                 }

                 .text_custom{
                   display: flex;
                   justify-content: space-around;
                   font-size: 15px;
                   z-index: 2;
                   margin-left:33.3333%;
                   margin-right:33.3333%;
                   font-family: monospace;
                 }

                 .zone_custom{
                   display: flex;
                   justify-content: space-around;
                   z-index: 1;
                 }

                 .case_custom{
                   display: flex;
                   justify-content: space-around;
                 }

                 .trait_custom_1{
                   border-right: 1px  solid ;
                   border-left: 1px  solid ;
                   display: block;
                   width: 8.3333%;
                   height: 50px;
                   position: fixed;
                   margin-top: 0px;
                   top: 0px;
                   left: 33.3%;
                   right: 0px;
                   z-index: 0;
                 }

                 .trait_custom_2{
                   border-right: 1px  solid ;
                   display: block;
                   width: 8.3333%;
                   height: 50px;
                   position: fixed;
                   margin-top: 0px;
                   top: 0px;
                   left: 41.7%;
                   right: 0px;
                 }

                 .trait_custom_3{
                   border-right: 1px  solid ;
                   display: block;
                   width: 8.3333%;
                   height: 50px;
                   position: fixed;
                   margin-top: 0px;
                   top: 0px;
                   left: 50%;
                   right: 0px;
                 }

    button{
      background: none;
      opacity: 50%;
      color: none;
      border: none;
      outline-style: none;
      width: 157px;
      height: 50px;
      cursor:pointer;
    }

    </style>
  </head>

  <body>

    <div class="font">
    <div class="BandeMenuHaut">
    <div class="text_custom">
      <p>noir</p>
      <p>bleu</p>
      <p>rouge</p>
      <p>gris</p>
    </div>
        <div class="custom">
          <div class="case_custom">
            <div class="trait_custom_1"></div>
            <div class="trait_custom_2"></div>
            <div class="trait_custom_3"></div>
          </div>
          <div class="zone_custom">
            <button onclick = "changeColor('black','gainsboro');"></button>
            <button onclick = "changeColor('MidnightBlue','gainsboro');"></button>
            <button onclick = "changeColor('black','firebrick')"></button>
            <button onclick = "changeColor('gainsboro','black')"></button>
          </div>
        </div>
    </div>
    <script>

    function changeColor(bgcolor,fontcolor) {
      document.body.style.background = bgcolor;
      document.body.style.color = fontcolor;
      localStorage.setItem('bgcolor',bgcolor); // storage.setItem(nomClé, valeurClé);
      localStorage.setItem('fontcolor',fontcolor); // storage.setItem(nomClé, valeurClé);
    }
    //code qui s'executera lorsque la page sera finie de charger
    (function(){
       document.body.style.background = localStorage.getItem('bgcolor');
        document.body.style.color = localStorage.getItem('fontcolor');
    })();
    </script>
    </body>
</html>

Raviolito > jordane45 Messages postés 38142 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 20 avril 2024
18 avril 2021 à 21:34

Super ça marche!
Effectivement mettre le javascript dans le head était le problème.

Merci!

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page

Mail étrange (demande de reinitialisation MDP)

macOs High Sierra : « Le serveur de récupération n’a pas pu être contacté »

Exemple de base de données access

Discussions similaires

Newsletters