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> Link to comment https://forums.phpfreaks.com/topic/231148-element-to-change-bgcolor/ 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). Link to comment https://forums.phpfreaks.com/topic/231148-element-to-change-bgcolor/#findComment-1189799 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. Link to comment https://forums.phpfreaks.com/topic/231148-element-to-change-bgcolor/#findComment-1189904 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.