11397 sujets

JavaScript, DOM et API Web HTML5

Bonjour;
je suis débutant et j'ai du mal avec le js.
Je souhaite sauvegarder la couleur de mon tableau pour qu'un F5 ne réinitialise pas tout.
J'ai regardé pour mettre en place un localStorage mais je n'y arrive pas.
Avez-vous une solution qui peut marcher ?

Merci d'avance.


page index (En tout j'ai 5 tableau comme celui la)

	<!--Premier Tableau-->
	<table class="tg table5">
		  <tr>
	    <th colspan="2"></th>
	  </tr>
	  <tr>
	    <th class="rouge" onclick="changeCouleur(this)"></th>
	    <th class="rouge" onclick="changeCouleur(this)"></th>
	  </tr>
	</table>
		<script>
			//localStorage.setItem('', '');
			

			function changeCouleur(td){
				td.className = (td.className == "rouge") ? "vert" : "rouge";
				if (localStorage.className){
					localStorage.className = (localStorage.className == "rouge") ? "vert" : "rouge";
				} else {
					localStorage.className = "erreur";
				}
			}
		</script>
    </body>
</html>


page css

.rouge{
	background-color:red;
	opacity:0.33;
}
.vert{
	background-color:green;
	opacity:0.33;
}
Modérateur
Salut !

Deux chose m'ont l'air de manquer :

1/ L'initialisation

C'est bien se sauvegarder au click mais quand tu refresh le navigateur il n'y a rien pour dire "Si il y a un paramètre sauvegardé applique le" du coup l'état de départ ne change pas.

2/ Différencier les deux boutons

Tu sauvegardes l'état des deux bouton dans le meme storage. A mon avis il te faudrait un truc du genre localStorage.btn1_className et localStorage.btn2_className parceque la tu ne sauvegarde que le dernier état "vert" ou "rouge" mais tes deux boutons ont peut etre une couleur différente Smiley smile
Pour l’initialisation je suis d’accord il la manque je ne sais pas la mettre en place.

Le problème d'identifier les boutons c'est que j'en ai pas que deux, j'ai mis qu'un tableau mais en totalité je n'ai pas loin de 40 boutons qui doivent changer de couleur et chacun peut prendre une couleur différente (rouge ou vert).

Sans forcement utilisé un local storage j'aimerais savoir s'il existe une autre possibilité pour sauvegarder la couleur dès ses "boutons"
Modérateur
VicMeil a écrit :
Pour l’initialisation je suis d’accord il la manque je ne sais pas la mettre en place.

Un simple if tout comme dans ta fonction suffira Smiley smile
if (localStorage.className){
    // si il y a bien un paramètre alors on applique le changement
}


VicMeil a écrit :
Le problème d'identifier les boutons c'est que j'en ai pas que deux, j'ai mis qu'un tableau mais en totalité je n'ai pas loin de 40 boutons qui doivent changer de couleur et chacun peut prendre une couleur différente (rouge ou vert).

Effectivement, d'où l'utilité de les séparer. En l'état, si tu change 1 bouton tu ne va sauvegarder que "rouge" ou "vert" et à l'initialisation tu ne sauras pas lequel. Le plus simple, je pense, serait que tu sauvegardes une parie "id" + "class".

VicMeil a écrit :
Sans forcement utilisé un local storage j'aimerais savoir s'il existe une autre possibilité pour sauvegarder la couleur dès ses "boutons"
Pas de solution aussi simple en tout cas et même avec un autre moyen le soucis restera le même.

Est-ce que tu peux mettre des id sur tout tes boutons ?
<th id="bouton1" class="rouge" onclick="changeCouleur(this)"></th>
<th id="bouton2" class="rouge" onclick="changeCouleur(this)"></th>
// etc...
J'ai mis des id à tous et changer la Class par btn + numéro (la class="rouge") ne permettais seulement d'afficher rouge en état initial.

J'ai 42 id/class
Modifié par VicMeil (08 Mar 2021 - 13:00)
Modérateur
Ola !

Pour les classes il vaut mieux une classe commune. Comme on a les id, pas besoin de classe unique ici.
Bon du coup je t'ai fait un petit exemple qui devrait te faciliter la chose :
let btns = document.getElementsByClassName("btn");

for (let i = 0; i < btns.length; i++) {
 if ( localStorage.getItem(btns[i].id) ) {
    btns[i].classList.add(localStorage.getItem(btns[i].id));
  } else {
    btns[i].classList.add("rouge");
  }
  document.getElementById("btn" + (i+1)).addEventListener("click", changeCouleur, false);
}

function changeCouleur(){
  this.classList.toggle("rouge");
  this.classList.toggle("vert");
  localStorage.setItem(this.id, this.classList.contains("rouge") ? "rouge" : "vert");
}

https://jsfiddle.net/undless/2Lhvbzw4/
Comment fonctionne-t-il, il permet de changer la couleur ?

J'ai essayé mais je n'ai qu'un élément qui se fix en rouge et rien d'autre ne se colore.
Modérateur
Salut,

Tu as cliqué sur le lien de l'exemple ? Histoire de pouvoir tester le code et de voir le DOM (avec les classe et id nécessaires) et le CSS.

Sinon voila quelques commentaires dans le code si jamais ca peut t'aider :

// récupération de tout les boutons grace a une class commune "btn"
let btns = document.getElementsByClassName("btn");

// initialisation. On fait une boucle sur tout les boutons récupéré précédement
for (let i = 0; i < btns.length; i++) {
 if ( localStorage.getItem(btns[i].id) ) {
// si il y a un enregistrement de leur id on leur donne la couleur enregistrée
    btns[i].classList.add(localStorage.getItem(btns[i].id));
  } else {
// sinon on leur donne la classe rouge par défaut
    btns[i].classList.add("rouge");
  }
// on en profite pour leur coller un eventListner au click pour ne pas charger le DOM avec les onClick
  document.getElementById("btn" + (i+1)).addEventListener("click", changeCouleur, false);
}

// la fonction déclenchée au click
function changeCouleur(){
// toggle sur la classe rouge : si elle y est elle disparait, si elle n'y est pas elle apparait
  this.classList.toggle("rouge");
// toggle sur la classe verte
  this.classList.toggle("vert");
// on sauvegarde "rouge" s'il y a la classe "rouge" sinon on sauvegarde "vert" dans un set-idem dont la clé est l'id du boutton
  localStorage.setItem(this.id, this.classList.contains("rouge") ? "rouge" : "vert");
}

Modifié par _laurent (09 Mar 2021 - 15:34)
Meilleure solution
Super merci, tout fonctionne niquel Smiley good

je cherchais vraiment a faire compliquer, en tout cas merci super solution Smiley biggrin
Modifié par VicMeil (09 Mar 2021 - 15:44)
Modérateur
VicMeil a écrit :
Super merci, tout fonctionne niquel Smiley good

Parfait alors

VicMeil a écrit :
je cherchais vraiment a faire compliquer, en tout cas merci super solution Smiley biggrin

Non t'as fait au plus direct et au plus simple pour 1 bouton, il te manquait juste les finitions (eventListner principalement) et le passage à l'échelle pour gérer plusieurs boutons Smiley cligne

Bonne aprem !