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

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -