How do I run multiple functions in Javascript? -
i trying learn javascript , struggling! have got head around css & html ok level , have made basic file me learn basic javascript functions. want know if doing on right path? want click on different color boxes , change main box. have made fiddle link here: http://jsfiddle.net/margate/mn9hs/
this should self explanatory. nothing ever used want learn it! after hours trying work out stuck why not working! thank / guidance....
<!doctype html><html><head><title> learning page!</title> <style type="text/css"> #maincontent{position: relative; margin: 0px auto; top: 10px; border: 2px solid black; width: 500px; height: 250px;} #changethis{position: absolute; top: 10px; left: 50px; width: 400px; height: 100px; background-color: red; border: 2px solid black;} #colourboxcontiner{position: absolute; left: 99px; top: 120px; width: 302px; height: 102px; border: 1px solid black;} #redbox{position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red; border: 1px solid black; cursor: pointer;} #yellowbox {position: absolute; top: 0px; left: 100px; width: 100px; height: 100px; background-color: yellow; border: 1px solid black; cursor: pointer;} #greenbox {position: absolute; top: 0px; left: 200px; width: 100px; height: 100px; background-color: green; border: 1px solid black; cursor: pointer;} </style> </head> <body> <div id="maincontent"> <div id="changethis"></div> <div id="colourboxcontiner"> <div id = "redbox" onclick="changecolorone()"></div> <div id = "yellowbox" onclick="changecolortwo()"></div> <div id = "greenbox" onclick="changecolorthree()"></div> </div> </div> <script> function changecolorone() { document.getelementbyid('changethis').style="background.color:orange"; } function changecolortwo() { document.getelementbyid('changethis').style="background.color:black"; } function changecolorthree() { document.getelementbyid('changethis').style="background.color:blue"; } </script> </body> </html>
the fiddle won't work (or won't me on chrome) while have javascript set onload
, try no wrap - in <head>
, you've little syntax error in javascript. apart close.
eg.
function changecolorone() { document.getelementbyid("changethis").style.backgroundcolor = "orange"; }
see updated version on fiddle: http://jsfiddle.net/mn9hs/1/
Comments
Post a Comment