Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple JS Help Change class via select / option

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <!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>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •