Modifier dynamiquement la couleur de fond

Version imprimable

Bonjour,

pour mon site, j'aimerais pouvoir proposer aux visiteurs de personnaliser la couleur de fond selon leur préférence à l'aide d'un petit formulaire :
Code:

1 2 3 4 5 6 7 8 9 <form> <select onChange="javascript:chgColor(this)"> <option value="0">noir</option> <option value="1">gris</option> <option value="2" selected="true">beige</option> <option value="3">brun</option> <option value="4">ocre</option> </select> </form>
J'utilise donc Javascript pour accéder à la propriété bgColor de la balise body :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript"> function chgColor(selection){ var color = selection.options[selection.selectedIndex].value; switch(name){ case 0: document.body.bgColor = "black"; break; case 1: document.body.bgColor = "gray"; break; case 2: document.body.bgColor = "#BA7741"; break; case 3: document.body.bgColor = "#660000"; break; case 4: document.body.bgColor = "#FFFF66"; break; default: document.body.bgColor = "#BA7741"; break; } } </script>
Le hic, c'est que rien ne se passe quand je choisis une autre couleur via le formulaire, pas d'erreurs javascript (en tout cas Firebug ne gueule pas ;)) mais pas de changement de couleur non plus.

Ma fonction javascript est-elle correcte ?

Merci d'avance pour votre aide :D

06/09/2008, 14h49
SpaceFrog

un switch sur name ...

pourquoi pas... mais c'est quoi name ?

Effectivement !! J'ai honte :oops::oops:

Ce n'est pas "name" qu'il fallait lire mais "color", voilà le code corrigé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
	function chgColor(selection){
		var color = selection.options[selection.selectedIndex].value;
 
		switch(color){
			case 0: document.body.bgColor = "black"; break;
			case 1: document.body.bgColor = "gray"; break;
			case 2: document.body.bgColor = "#BA7741"; break;
			case 3: document.body.bgColor = "#660000"; break;
			case 4: document.body.bgColor = "#FFFF66"; break;
			default: document.body.bgColor = "#BA7741"; break;
		}
	}
</script>

Grosse bourde corrigée, merci SpaceFrog. Mais ça ne marche malheureusement pas plus :?

07/09/2008, 17h19
zn415

Est ce que tu recoit la variable? Met un alert("ma var"+color); dans ton code pour vérifier.

le select est un peu particulier, il faut passer this.value ...

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
<form>
	<select onChange="chgColor(this.value)">
		<option value="0">noir</option>
		<option value="1">gris</option>
		<option value="2" selected="true">beige</option>
		<option value="3">brun</option>
		<option value="4">ocre</option>
	</select>
</form>

et du coup, sans oublier que les values sont des strings ..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
	function chgColor(selection){
 
		switch(selection){
			case ("0"): document.body.bgColor = "black"; break;
			case ("1"): document.body.bgColor = "gray"; break;
			case ("2"): document.body.bgColor = "#BA7741"; break;
			case ("3"): document.body.bgColor = "#660000"; break;
			case ("4"): document.body.bgColor = "#FFFF66"; break;
			default: document.body.bgColor = "#BA7741"; break;
		}
	}
</script>

Code:

1
2
 
document.body.bgColor =  "#BA7741";

:nono:

Utilise cette syntaxe :

Code:

1
2
 
document.body.style.backgroundColor = "#BA7741";

;)