11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Changement de couleur !

Bonjour,
Ca doit être tout simple, mais je ne vois pas. Peut-être de mauvaises lunettes !
Je voudrais, au click sur un bouton, en changer à la fois la couleur du fonds et la couleur du texte.
mon code :

<button id= "b1"; class = "bouton" onclick = "b1()">Autre monde ...</button>




.bouton {

          background-color: #FFFF00;
          border-radius: 50px;
          border-width: 20;
          box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0;
          color: #0099FF;
          cursor: pointer;
          display: inline-block;
          font-family: Arial, sans-serif;
          font-size: 15px;
          height: 30px;
          padding: 0 25px;
}




	function b1() 
	{
		var button = document.getElementById('b1');
		var bool = 1;
	{
		if(bool=== 0)
		{
			button.style.background-color = #0099FF;
			bool=1;
		}
	else 
		{
 		button.style.background-color = #FFFF00;
		button.style.color = #0099FF;
         	bool = 0;
		}
   };
  };

Punition ... Il ne se passe rien au moment du click !
Si quelqu'un a une meilleure idée !
Merci
H.
Excusez, il manquait une ligne

	function b1() 
	{
		var button = document.getElementById('b1');
		var bool = 1;
	{
		if(bool=== 0)
		{
			button.style.background-color = #0099FF;
			button.style.color = #FFFF00;
			bool=1;
		}
	else 
		{
 		button.style.background-color = #FFFF00;
		button.style.color = #0099FF;
         	bool = 0;
		}
   };
  };

H.
Modérateur
Salut,

(je regroupe mes précédents commentaires en un seul post)

Juste avant de creuser, y'a un ; dans ta balise html.

C'est quoi cette accolade ligne 5 de ton Js ? Elle s'ouvre dans le vide.

Sinon pour le cœur du problème :

Dans la doc de background color on peut voir comment y accéder en Js :
W3schools a écrit :
JavaScript syntax:
object.style.backgroundColor="#00FF00"

https://www.w3schools.com/cssref/pr_background-color.php
et non
object.style.background-color = #0099FF;


Ensuite tu utilise un bool pour connaitre ton état. Pourquoi pas mais comme il est défini dans ta fonction, il est créé puis détruit à chaque click donc il ne retient rien. Il faut le créer une seule fois en dehors de ta fonction puis le mettre à jour son état dans la fonction.

Sinon je te conseille de passer par la gestion de class avec classList et toggle qui permet de mettre/enlever automatiquement une class sur un élément.

J'en profite également pour passer par un event listner plutôt qu'un onclick dans le HTML comme ca tout est bien à sa place :

<button id="b1" class="bouton">Autre monde ...</button>

(sans le onclick="b1" que j'avais laissé par erreur merci Mathieuu )

const b1 = document.getElementById("b1");
b1.addEventListener("click", changeColor);

function changeColor() {
  b1.classList.toggle('variant')
};


.bouton {
  background-color: #FFFF00;
  border-radius: 50px;
  border-width: 20;
  box-shadow:
    rgba(25, 25, 25, 0.04) 0 0 1px 0,
    rgba(0, 0, 0, 0.1) 0 3px 4px 0;
  color: #0099FF;
  cursor: pointer;
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 15px;
  height: 30px;
  padding: 0 25px;
}

.variant {
  background-color: #0099FF;
  color: #FFFF00;
}

https://jsfiddle.net/3bdypLva/

Bonne journée !
Modifié par _laurent (15 Mar 2023 - 14:29)
Meilleure solution
Salut,

pour la solution de _laurent a priori il n'y a pas besoin du onclick dans la balise : 
<button id="b1" class="bouton" onclick="b1">Autre monde ...</button>

=>
<button id="b1" class="bouton" >Autre monde ...</button>
Modérateur
Mathieuu a écrit :
Salut,

pour la solution de _laurent a priori il n'y a pas besoin du onclick dans la balise : 
&lt;button id="b1" class="bouton" onclick="b1"&gt;Autre monde ...&lt;/button&gt;

=&gt;
&lt;button id="b1" class="bouton" &gt;Autre monde ...&lt;/button&gt;

Ah merde je me suis planté dans les copier/coller hehehe merci Mathieuu !
A Laurent et Mathieuu,
Merci de vous être penché sur mon problème !
Je suis allé voir sur
https://jsfiddle.net/3bdypLva/
le test est super !
J'ai soigneusement fait du coupé/collé des lignes.
Je n'a rien touché, sauf :
border-width: 20;
qui est devenu
border-width: 5;
et j'ai créé une mini feuille html :

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test toggle</title>
	<link rel="stylesheet" type="text/css" href="original_css.css" />
	<script type="text/javascript" src="original_js.js"></script>
</head> 
<button id="b1" class="bouton">Autre monde ...</button>

en reprenant la ligne
<button id="b1" class="bouton">Autre monde ...</button>
Soit je suis bête, soit mon système est pourri, mais j'ai bien le bouton qui s'affiche, dans la couleur de base. Si je clique dessus, le bouton ne change pas de couleur, seule la bordure croise, l'ombre une fois en haut et une fois en bas, dès qu je relâche le clique sur la souris.
Mais pas de toggle !
Je tourne sous Widows XP Pro 32bits SP3
Et FireFox 52.9.0 ESR our Chrome 49.0.2623.112
Ou sur un autre machine sous Ubuntu 14 LTS.
J'ai bien regardé, lu et relu les différents codes, j'ai compris comment ça devrait marcher !
Et là, je câle.
Si jamais ????
Mais merci de toutes façon !
H.
Modérateur
Ola,

Je mets une petite piece sur le DOM qui est pas encore chargé au moment de l'execution du Js. Deux facon pour tester ça :

- Le test rapide : inclure le script Js dans le HTML pour valider l'hypothèse (au lieu d'avoir l'import via link dans le head)
<button id="b1" class="bouton">Autre monde ...</button>
<script>
const b1 = document.getElementById("b1");
b1.addEventListener("click", changeColor);

function changeColor() {
  b1.classList.toggle('variant')
};
</script>


Et si ça fonctionne, ca valide l'hypothèse et donc on peut faire la solution 2

- le fix plus propre : remettre le Js dans son fichier et rajouter un test de DOMready

document.addEventListener("DOMContentLoaded", function(event) {
   const b1 = document.getElementById("b1");
   b1.addEventListener("click", changeColor);

   function changeColor() {
     b1.classList.toggle('variant')
   };
});


Tiens nous au jus si c'est pas ça

Bonne journée
Modifié par _laurent (20 Mar 2023 - 12:06)
Ben voilà !!! C'était tout simple !
Mais il fallait savoir !
Je suis allé sur le net pour comprendre ce que faisait cette instruction ( je déteste faire du copier/coller sans savoir ).
En fait, dans d'autres script, je me suis servi de window.onload.
En tout cas, ça marche ! Sous XP et FF, et sous chrome, et sous widows 10 !
Merci à tous.
Amitiés et à bientôt
H.
P.S.
J'ai utilisé:

document.addEventListener("DOMContentLoaded", function(event)

Extra !
Encore merci
Modérateur
C'est une autre solution effectivement et comme je ne connaissais pas bien la différence entre les deux j'ai cherché un peu (j'ai pas eu a chercher bien loin pour le coup) :

a écrit :
L'évènement load est déclenché lorsque la page et toutes ses ressources dépendantes (telles que des feuilles de style et des images) sont complètement chargées. Cela contraste avec DOMContentLoaded, qui est déclenché lorsque le DOM de la page est chargé sans attendre la fin du chargement des ressources.

https://developer.mozilla.org/fr/docs/Web/API/Window/load_event

grâce a ton post j'ai fait la lumière la dessus.
Merci !
Merci `!
Ouaip, je pense que la différence tient surtout sur de pages html avec beauoup d'images, et ces css longues comme un jour sans pain !
Mais dans la réalité de mon site, j'y crois pas bien ! Gagner 1/10 de seconde ?
H.
Prévenir un modérateur
Répondre au sujet
Aller à