Select an option to change a page's background color
Question
I want to select an option in order to change the background color of a page using JavaScript.
This is what I've tried:
<html>
<head>
<script>
function colorFunction()
{
document.bgcolor="this.option[this.selectedIndex]";
}
</script>
</head>
<body>
<form name="bgcolor form">try it now:
<select onchanage="colorFunction">
<option value="choose">Set Background color
<option value="FFOOOO">Dark Red
<option value="OOFFOO">Dark Green
<option value="OOOOFF">Dark Blue
<option value="OOOOOO">Black
</select>
</form>
</body>
</html>
However, my code doesn't work (and I don't know what the errors are).
5 answers
solution1
1
Simply do it by using jquery.
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#dropdown").change(function() { var color = $("#dropdown").val(); // alert(color); $("body").css("background-color", color); }); }); </script> </head> <body> <form name="bgcolor form">try it now: <select id="dropdown"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
solution2
1
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#dropdown").change(function() { var color = $("#dropdown").val(); // alert(color); $("body").css("background-color", color); }); }); </script> </head> <body> <form name="bgcolor form">try it now: <select id="dropdown"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
solution3
0 2015-12-24 10:56:19
I think,this is what you want.
<html> <head> <script> function colorFunction(color) { document.body.style.backgroundColor = color; } </script> </head> <body> <form name="bgcolor form">try it now: <select onchange="colorFunction(this.value)"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
solution4
0 2015-12-24 11:09:03
Here i have modified your code ,please check it. I have done it in the way you want to get result.
<html> <head> <script> function colorFunction() { var color = document.getElementById("thedropdown"); document.body.style.backgroundColor = color.options[color.selectedIndex].value; } </script> </head> <body> <form name="bgcolor form">try it now: <select id="thedropdown" onchange="colorFunction()"> <option value="#fff">Set Background color <option value="#ff0000">Dark Red <option value="#006600">Dark Green <option value="#0000ff">Dark Blue <option value="#000000">Black </select> </form> </body> </html>
solution5
-2 2015-11-27 15:09:13
You have a typo. It should be:
<select onchange="colorFunction">
Here's my solution:
function colorFunction(e) { if(e.selectedIndex!=0) { document.bgColor = e.options[e.selectedIndex].value } }
<form name="bgcolor form">Try it now: <select onChange="colorFunction(this)"> <option value="choose">set background color <option value="FFFFCC">light yellow <option value="CCFFFF">light blue <option value="CCFFCC">light green <option value="CCCCCC">gray <option value="FFFFFF">white </select> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to change the background color of a select option on hover
Unable to change selected option background color | React Select
Javascript: Change select background-color if option is selected
Change option background color for individual select2 boxes?
Javascript change background color in select option with range slider
javascript change select option background color drop down
How to change select menu background color after selected any option| not option color
Change color on select > option change
Change the background color of the selected option
Change option background color on hover?
Related Tags