Forum Moderators: open
<head>
<style>
body {
background-color:#cccccc;
color:#000000;
}
body.aaa {
background-color:#000000;
}
body.bbb {
background-color:#ff0000;
}
body.ccc {
color:#ffffff;
}
body.ddd {
color:#ff00ff;
}
</style>
<head>
So here I have my classes set up. Now I want to create drop-down menus to allow the user to select from either "www" or "#*$!", and from either "yyy" or "zzz". I really don't know how to do this at all. What I tried was this (and feel free to laugh):
<select>
<option selected="selected">CHOOSE BACKGROUND COLOR</option>
<option value="aaa">BLACK</option>
<option value="bbb">RED</option>
</select>
<select>
<option selected="selected">CHOOSE FONT COLOR</option>
<option value="ccc">WHITE</option>
<option value="ddd">PURPLE</option>
</select>
Obviously I'm just feeling around in the dark here, but you can probably see where I'm going with this...
What I don't understand is how to make the user's selection actually affect the page. Is it some kind of "Onclick" thing? How do I make it so that the users selection actually affects the page in real time?
It seems like it would be something simple, but I haven't found it yet. Any help would be greatly appreciated - thanks!
Thanks,
Phil
<select onchange="document.getElementById('IDOfElementToChange').style.backgroundcolor=this.value;">
<option selected="selected">CHOOSE FONT COLOR</option>
<option value="ccc">WHITE</option>
<option value="ddd">PURPLE</option>
</select>
backgroundcolorbackgroundColor
