Changing CSS with option boxes Options

[ajc39]

Hi, im a bit of a beginner when it comes to web design, my problem is that i want to be able to change css values of the website so that the background will change colour. At the moment I have intended to use a option drop down box and have the following code which unfortunatly I have not got to work

function changeCSS(sclassName)
{
document.getElementById('mainContent').className=sclassName;
document.getElementById('menu').className=sclassName;
document.getElementById('body').className=sclassName;
document.getElementById('*').className=sclassName;
}
<SELECT NAME="Favorite_Color2" SIZE="1" onchange="('Index: ' + this.selectedIndex
+ '\nValue: ' + this.options[this.selectedIndex].value)">
<OPTION SELECTED VALUE = "changeCSS('White');">White
<OPTION SELECTED VALUE = "changeCSS('Red');">Red
<OPTION SELECTED VALUE = "changeCSS('Blue');">Blue
<OPTION SELECTED VALUE = "changeCSS('Green');">Green
<OPTION SELECTED VALUE = "changeCSS('Yellow');">Yellow
<OPTION SELECTED VALUE = "changeCSS('Orange');">Orange
<OPTION SELECTED VALUE = "changeCSS('Purple');">Purple
</SELECT>

If anyone has a solution has to how to get the code to work, or perhaps an alternative way of doing this which may be easier would be highly greatfull.

Many thanks
Andy

[Rocco Tripaldi]

Try this:

<SELECT NAME="Favorite_Color2" SIZE="1" onchange="changeCSS(this.value)">
<OPTION SELECTED VALUE = "value">White</option>

[ajc39]

thanks for the quick reply, unfortunately this does not seem to do anything

[Christian J]

document.getElementById('*').className=sclassName;

An ID value can't be "*". Is the purpose to give all elements a className?

<SELECT NAME="Favorite_Color2" SIZE="1" onchange="('Index: ' + this.selectedIndex + '\nValue: ' + this.options[this.selectedIndex].value)">

You must call the function changeCSS somewhere (e.g. in the onchange event). Also the function call's parameter must contain only the selected OPTION element's value. Something like:

CODE

<select onchange="changeCSS(this.options[this.selectedIndex].value);">

<OPTION SELECTED VALUE = "changeCSS('White');">White
<OPTION SELECTED VALUE = "changeCSS('Red');">Red
<OPTION SELECTED VALUE = "changeCSS('Blue');">Blue
<OPTION SELECTED VALUE = "changeCSS('Green');">Green
<OPTION SELECTED VALUE = "changeCSS('Yellow');">Yellow
<OPTION SELECTED VALUE = "changeCSS('Orange');">Orange
<OPTION SELECTED VALUE = "changeCSS('Purple');">Purple

You can't call the function changeCSS from the OPTION's value, instead the value becomes literally e.g. "changeCSS('White');" which you don't want. Try something like this instead (and make sure the style sheet classes match):

CODE

<option value="White">White
...etc.

Also you can only let one OPTION be pre-SELECTED (unless the MULTIPLE attribute is used).