Changer la couleur de fond d'un bouton 2 fois

**azorol** · 22/03/2013, 00h41

Bonsoir,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SylvainPV** · 22/03/2013, 01h44

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

**dragonno** · 22/03/2013, 01h53

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.

**azorol** · 22/03/2013, 01h57

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.

**azorol** · 22/03/2013, 02h00

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é ?

**dragonno** · 22/03/2013, 04h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

La page js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Bovino** · 22/03/2013, 07h58

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

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

**azorol** · 22/03/2013, 13h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.