Discussion :

[Atharendil]

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 :

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

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 :

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

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

[SpaceFrog]

un switch sur name ...

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

[Atharendil]

Effectivement !! J'ai honte

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

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

[zn415]

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

[SpaceFrog]

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

Code :

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

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 :

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

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>

[Auteur]

Code :

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

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

Utilise cette syntaxe :

Code :

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

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