How do I run multiple functions in Javascript?
Question
I am trying to learn Javascript and struggling! I have got my head around CSS & HTML to an ok level and have made a very basic file to help me learn basic Javascript functions. I just want to know if what I am doing is on the right path? I want to click on the different color boxes and change the main box. I have made a fiddle link here: http://jsfiddle.net/Margate/mN9hs/
This should be self explanatory. Nothing that will ever be used I just want to learn with it! After hours trying to work it out I am completely stuck as to why it is not working! Thank you very much for any help / 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>
5 answers
solution1
3 2013-05-14 18:02:03
When you are setting the background color you should be using "backgroundColor" without the period, like this:
function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}
function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}
function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}
BTW, Codecademy is a great place to go to learn Javascript. You can also use w3Schools as a reference.
solution2
2 2013-05-14 17:58:20
document.getElementById('ChangeThis').style="background.color:orange";
->
document.getElementById('ChangeThis').style.backgroundColor = "orange";
solution3
2 ACCPTED 2013-05-14 18:02:53
The fiddle won't work (or won't for me on chrome) while you have the JavaScript set as onLoad , try No wrap - in <head> and you've a little syntax error in your JavaScript. Apart from that you were very close.
eg.
function ChangeColorOne() {
document.getElementById("ChangeThis").style.backgroundColor = "orange";
}
See this updated version on your fiddle: http://jsfiddle.net/mN9hs/1/
solution4
1 2013-05-14 17:58:32
Stop using HTML onclick attributes and bind the click events through JS. The structure is yourElement.addEventListener("click", yourfunction); if your function is available in the scope. If you assign more than one, and you do not prevent your event from bubbling, all your observers will get the message.
solution5
1 2013-05-14 18:13:52
Okay buddy here is your snippet in working condition.
Actually you need to do as:
function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}
function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}
function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}
ChangeColorOne();
ChangeColorTwo();
ChangeColorThree(); // call them all
Have a look. Hope it will help you =) .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.