I am going around in circles. Using JS to allow combo box to decide the background colour, (one of three) of a square. This is my .js file:
The css file creates the box size and colours. I think the problem arethe lines following function nextColour.
Many, many thanks to everyone who responds.
window.onload = initForm;
function initForm(){
document.selectStatus.newColour.getElementById("ne wColour").selectedIndex = 0;
document.selectStatus.newColour.getElementById("ne wColour").onchange = nextColour;
}
function nextColour(){
switch(this.id){
case selectedIndex=1;
document.#colorMe.box.bgColor = "red";
break;
default:}
}
This is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to jQuery #3!</title>
<link rel="stylesheet" href="color.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="color.js"></script>
</head>
<body>
</p>
<table width="610px">
<tr><td>Overall Status</td>
<td> </td>
<td>
<form name="selectStatus">
<select name="newColour">
<option value="space"></option>
<option value="red" id="red">Red</option>
<option value="amber">Amber</option>
<option value="green">Green</option>
</select></form></td>
<td> </td>
<td div id="colorMe" class="box"></div></td>
</tr></table></div>
</body>
</html>
The css file creates the box size and colours. I think the problem arethe lines following function nextColour.
Many, many thanks to everyone who responds.
window.onload = initForm;
function initForm(){
document.selectStatus.newColour.getElementById("ne wColour").selectedIndex = 0;
document.selectStatus.newColour.getElementById("ne wColour").onchange = nextColour;
}
function nextColour(){
switch(this.id){
case selectedIndex=1;
document.#colorMe.box.bgColor = "red";
break;
default:}
}
This is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to jQuery #3!</title>
<link rel="stylesheet" href="color.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="color.js"></script>
</head>
<body>
</p>
<table width="610px">
<tr><td>Overall Status</td>
<td> </td>
<td>
<form name="selectStatus">
<select name="newColour">
<option value="space"></option>
<option value="red" id="red">Red</option>
<option value="amber">Amber</option>
<option value="green">Green</option>
</select></form></td>
<td> </td>
<td div id="colorMe" class="box"></div></td>
</tr></table></div>
</body>
</html>