...

View Full Version : Simple JS Help Change class via select / option



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>

abduraooft
10-08-2010, 08:09 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<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(this.value);">
<option value=" " selected="selected"> Change </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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum