vlad_
10-07-2010, 10:27 AM
Hello Guys,
I am new at JS can anyone tell me why my code isn't working. I am sure its something really stupid :(
I am trying to change class depending on the option selected. I can get it to say hello world, but not change class. Where am I off?
<html>
<head>
<style>
#chosen{height:300px; width:600px; background-color:#CCCCCC}
.class1{background-color:#000000; color:#fff}
</style>
<script language="javascript">
<!--
function changeClass(chosen)
{
theBox = document.getElementById(chosen);
if (chosen == " ") {
theBox.className = "class1";
}
if (chosen == "1") {
alert("you chose1");
}
if (chosen == "2") {
alert("22222222!");
}
if (chosen == "3") {
alert("33333!");
}
}
-->
</script>
</head>
<body>
<div align="center">
<form name="myform">
<select name="optone" size="1"
onchange="changeClass(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
</form>
<div id="chosen">
This needs to change class
</div>
</div>
</body>
</html>
I am new at JS can anyone tell me why my code isn't working. I am sure its something really stupid :(
I am trying to change class depending on the option selected. I can get it to say hello world, but not change class. Where am I off?
<html>
<head>
<style>
#chosen{height:300px; width:600px; background-color:#CCCCCC}
.class1{background-color:#000000; color:#fff}
</style>
<script language="javascript">
<!--
function changeClass(chosen)
{
theBox = document.getElementById(chosen);
if (chosen == " ") {
theBox.className = "class1";
}
if (chosen == "1") {
alert("you chose1");
}
if (chosen == "2") {
alert("22222222!");
}
if (chosen == "3") {
alert("33333!");
}
}
-->
</script>
</head>
<body>
<div align="center">
<form name="myform">
<select name="optone" size="1"
onchange="changeClass(document.myform.optone.options[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>
</form>
<div id="chosen">
This needs to change class
</div>
</div>
</body>
</html>