Changer la couleur de fond d'un bouton 2 fois

Version imprimable

Bonsoir,

J'ai fais se petit bout code pour changer la couleur d'un bouton lorsqu'on clique dessus :
Code:

1 2 3 4 5 6 <SCRIPT LANGUAGE="javascript"> function change(){ if (document.frm.button1.style.background='#66CCCC'){document.frm.button1.style.background='#FF6633';} } </SCRIPT> <input name="button1" type="button" style="background-color:#66CCCC" onclick="change()" value="1">
Cela fonctionne tres bien, seulement j'essaie de revenir à la couleur initiale en re cliquant dessus avec le code suivant :
Code:

1 2 3 4 5 6 7 <SCRIPT LANGUAGE="javascript"> function change(){ if (document.frm.button1.style.background='#66CCCC'){document.frm.button1.style.background='#FF6633';alert ("#FF6633");} if (document.frm.button1.style.background='#FF6633'){document.frm.button1.style.background='#66CCCC';alert ("#66CCCC");} } </SCRIPT> <input name="button1" type="button" style="background-color:#66CCCC" onclick="change()" value="1">
Mais ça ne fonctionne pas, ou du moins ça ne reste pas visible... J'ai mis des alert pour bloquer apres chaque ligne pour voir, et la couleur change bien mais c'est fugitif.
Comment je pourrais faire pour avoir les deux couleurs stables ?

Merci d'avance.

22/03/2013, 01h44
SylvainPV

Relis ton code et essaie de comprendre ce qui se passe. Si la première condition est vraie, alors la deuxième la sera aussi forcément ;)

Mets un else pour ta seconde condition et ça fera l'affaire
22/03/2013, 01h53
dragonno

Le principe d'un bouton qui allume ou ferme une lumière (et donc une couleur sur fermé et une couleur sur ouvert) c'est que lorsque tu clique la première fois, un test vérifie si un indicateur est à 1, si c'est le cas il le met à 0 et actionne une couleur, sinon il le met à 1 et actionne la deuxième couleur.

Quand tu clique la deuxième fois, c'est le deuxième cas qui se produit donc tu as ta deuxième couleur.
22/03/2013, 01h57
azorol

Citation:

Envoyé par SylvainPV

Relis ton code et essaie de comprendre ce qui se passe. Si la première condition est vraie, alors la deuxième la sera aussi forcément ;)

Mets un else pour ta seconde condition et ça fera l'affaire

non ça fonctionne pas non plus avec un else j'ai tester en premier avec.
22/03/2013, 02h00
azorol

Citation:

Envoyé par dragonno

Le principe d'un bouton qui allume ou ferme une lumière (et donc une couleur sur fermé et une couleur sur ouvert) c'est que lorsque tu clique la première fois, un test vérifie si un indicateur est à 1, si c'est le cas il le met à 0 et actionne une couleur, sinon il le met à 1 et actionne la deuxième couleur.

Quand tu clique la deuxième fois, c'est le deuxième cas qui se produit donc tu as ta deuxième couleur.

J'ai testé aussi avec else if et c'est pareil...

pour exemple :
if condition1 alors réslutatx
else if condition2 alors résultat y
else if condion3 alors etc...

Par contre est que le bouton renvoie true lorsqu'il est pressé ?

D'après l'algo que je t'ai indiqué, tu peux voir le résultat ici :

Fais des fichiers avec ces codes ci-dessous et teste ;)

La page index.html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <title>Accueil</title> <link rel="stylesheet" href="index.css" /> <script language="javascript" src="index.js"> </script> </head> <body onload="test()"> <div id="boite" onclick="change()"> </div> </body> </html>
La page index.css :
Code:

1 2 3 4 5 6 7 #boite { width:100px; height:30px; margin:auto; background-color:blue; }
La page js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var indic=0; maboite=document.getElementById("boite"); function change() { if (indic==0) { boite.style.backgroundColor="blue"; indic=1; }else { boite.style.backgroundColor="red"; indic=0; } }
ça marchera tu verras, ensuite tu applique le systeme à ton probleme ;)

22/03/2013, 07h58
Bovino

:f1:

Code:

if (document.frm.button1.style.background='#66CCCC'){...}

Dans un if, on met une condition, pas une affectation ! :roll:

Renseigne-toi sur la différence entre =, == et === !

Effectivement ça fonctionne ! Merci Dragonno pour ton code !

Seulement il faut cliquer 2x la premiere fois pour faire changer la couleur ! Mais en modifiant le code de cette façon la :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var indic=0; maboite=document.getElementById("boite"); function change() { if (indic==0) ici { boite.style.backgroundColor="blue"; indic=1; ici }else { boite.style.backgroundColor="red"; indic=0; et ici } }
J'obtiens bien le fonctionnement que je cherchais, à savoir :
Premier click = rouge
Deuxieme click = bleu

en faite pour résumer soit 1, soit 0.

Merci beaucoup pour vos aides.

Cordialement.

22/03/2013, 13h59
dragonno

Ok c'est cool ;)

Le fait qu'il faille cliquer deux fois la première fois doit venir du fait que dans le code CSS j'ai défini une couleur de base :

Code:

background-color:blue;

Il suffit de remplacer le nom de la couleur par ta deuxieme couleur et ça marchera nickel normalement ;)