Here is the recommended script for your webpage:
<body onload="OnLoad()">
<select id="color" style="width: 5%; height: 10%" size="5">
<option value="white">White</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<script>
function OnLoad() {
document.getElementById("color").onchange = function () {
document.body.style.background = this.options[this.selectedIndex].value;
document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value;
}
var color = getCookie("WebBackgroundColor");
document.body.style.background = color;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>
</body>
If you want to use this script on other pages, remember to change the body tag from <body> to <body onload="OnLoad()">.
Additionally, make sure to include the script code at the bottom or in the header of the page:
<script>
function OnLoad() {
document.getElementById("color").onchange = function () {
document.body.style.background = this.options[this.selectedIndex].value;
document.cookie="WebBackgroundColor=" + this.options[this.selectedIndex].value;
}
var color = getCookie("WebBackgroundColor");
document.body.style.background = color;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
}
return "";
}
</script>