ActaNonVerba1 Posted March 20, 2011 Share Posted March 20, 2011 Hey guys, trying to get a select element to change the background colour of my Div. However it doesn't work - it used to and i havn't changed anything. What is wrong? Thanks, danny. <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Template</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top_bar"></div> <div id="header"></div> <div id="navigation"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">Home</a> </li> <li><a href="#" class="MenuBarItemSubmenu">Info</a> <ul> <li><a href="#">Types of Guitar</a></li> <li><a href="#">Types of Amp</a></li> <li><a href="#">Guitar Equipment</a></li> <li><a href="#">Changing Strings</a></li> </ul> </li> <li><a class="MenuBarItemSubmenu" href="#">Beginner</a> <ul> <li><a href="#">Getting Started</a> </li> <li><a href="#">Chords</a></li> </ul> </li> <li><a href="#" class="MenuBarItemSubmenu">Intermediate</a> <ul> <li><a href="#">Legato</a></li> <li><a href="#">String Bending</a></li> <li><a href="#">Untitled Item</a></li> </ul> </li> <li><a href="#">Feedback</a></li></ul></div> <div id="body_wrap"> <span class="style1"> </span> <div id="body_region"> <div id="body"> </div> <footer> <CENTER> <FORM> <span class="style2"><strong>Background colour: </strong></span> <SELECT name="ccGround" size="1" onChange=(document.getElementById("body_wrap").style.background=ccGround.options[ccGround.selectedIndex].value)> <OPTION value="408080" target="1">Cool Green </OPTION> <OPTION value="C0C0C0" target="1">Cool Grey </OPTION> <OPTION value="000000" target="1">Black </OPTION> <OPTION value="730200" target="1">DarkRed </OPTION> <OPTION value="231800" target="1">Brown </OPTION> <OPTION value="044302" target="1">DarkGreen </OPTION> <OPTION value="0D09A3" target="1">Dark Blue </OPTION> <OPTION value="808040" target="1">Avocado </OPTION> <OPTION value="800080" target="1">Purple </OPTION> <OPTION value="444444" target="1">Grey </OPTION> <OPTION value="FF0400" target="1">Red </OPTION> <OPTION value="EFE800" target="1">Yellow </OPTION> <OPTION value="05EF00" target="1">Green </OPTION> <OPTION value="0206FF" target="1">Blue </OPTION> <OPTION value="AE08EF" target="1">Violet </OPTION> <OPTION value="FF8C8A" target="1">Mauve </OPTION> <OPTION value="FF80FF" target="1">Pink </OPTION> <OPTION value="FFCCCC" target="1">Peach </OPTION> <OPTION value="FFCC99" target="1">Orange </OPTION> <OPTION value="000080" target="1">Darker Blue </OPTION> <OPTION value="808080" target="1">Dark Grey </OPTION> <OPTION value="D5CCBB" target="1">Tan </OPTION> <OPTION value="DDDDDD" target="1" selected>Light Grey </OPTION> <OPTION value="FBFF73" target="1">Light Yellow </OPTION> <OPTION value="7CFF7D" target="1">Light Green </OPTION> <OPTION value="A6BEFF" target="1">Light Blue </OPTION> <OPTION value="FFFFFF" target="1">White </OPTION> </SELECT></FORM> </CENTER> <CENTER><a href="javascript:void(0);" onClick="javascript:body.style.fontSize='.5em'"><span style="font-size: xx-small;">Small</span></a> <a href="javascript:void(0);" onClick="javascript:body.style.fontSize='1em'"><span style="font-size: x-small;">Medium</span></a> <a href="javascript:void(0);" onClick="javascript:body.style.fontSize='1.5em'"><span style="font-size: small;">Large</span></a> <a href="javascript:void(0);" onClick="javascript:body.style.fontSize='2em'"><span style="font-size: large;">Larger</span></a> <a href="javascript:void(0);" onClick="javascript:body.style.fontSize='2.5em'"><span style="font-size: x-large;">Largest</span></a></p></CENTER> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </footer> </div> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
nogray Posted March 20, 2011 Share Posted March 20, 2011 value="408080" should have a hash mark, e.g. value="#408080" or the value will be invalid (for all the colors). Quote Link to comment Share on other sites More sharing options...
Adam Posted March 20, 2011 Share Posted March 20, 2011 You're also missing quotes around the onclick attribute: onChange=(document.getElementById("body_wrap").style.background=ccGround.options[ccGround.selectedIndex].value) I'd use double, and changes those quotes around "body_wrap" to single. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.