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>

It's a typo error: document.getElementById('ChangeThis').style="background.color:blue" is wrong, use document.getElementById('ChangeThis').style.backgroundColor = "blue" instead. — Niccolò Campolungo
– Niccolò Campolungo, Commented May 14, 2013 at 17:57
What are the "multiple functions" you're trying to run? Each of your click handlers just runs one function. — Barmar
– Barmar, Commented May 14, 2013 at 18:04

DRock Miller · Accepted Answer · 2013-05-14 18:02:03Z

3

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.

answered May 14, 2013 at 18:02

DRock Miller

1627 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Margate Over a year ago

Thank you very much DRock Miller. Codeacademy is a good one. I will use this site a lot...

Klors · Accepted Answer · 2013-05-14 18:21:12Z

2

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/

edited May 14, 2013 at 18:21

answered May 14, 2013 at 18:02

Klors

2,6642 gold badges28 silver badges42 bronze badges

1 Comment

Margate Over a year ago

Thank you very much for your help and time Klors.

Nirvana Tikku · Accepted Answer · 2013-05-14 17:58:20Z

2

document.getElementById('ChangeThis').style="background.color:orange";

->

document.getElementById('ChangeThis').style.backgroundColor = "orange";

answered May 14, 2013 at 17:58

Nirvana Tikku

4,2152 gold badges23 silver badges28 bronze badges

Comments

Sébastien Renauld · Accepted Answer · 2013-05-14 17:58:32Z

1

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.

answered May 14, 2013 at 17:58

Sébastien Renauld

19.8k2 gold badges51 silver badges69 bronze badges

4 Comments

Margate Over a year ago

Hello Sebastien is it better that I learn event listeners then? I think I need to just go back to my courses! I have been learning this for months now but am still not any good at it! Thank you for your help...

Matt Coughlin Over a year ago

The title of the question is slightly misleading. The author isn't trying to bind multiple event handlers of the same event type for a single element. Side note: addEventListener isn't supported by IE8 and earlier (if that matters).

Sébastien Renauld Over a year ago

@margate: I have only supplied half of the solution. The event listener, when triggered, will have the element that triggered it as this. You can therefore easily change its color and thus reduce your four functions to one (possibly with an if statement in it).

Margate Over a year ago

Thanks for your help Sebastien, I will go back to my tutorials as I do not fully understand everything. I guess I just need to keep on learning....

Arslan Rafique · Accepted Answer · 2013-05-14 18:25:53Z

1

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 =) .

edited May 14, 2013 at 18:25

answered May 14, 2013 at 18:13

Arslan Rafique

1761 silver badge12 bronze badges

Collectives™ on Stack Overflow

How do I run multiple functions in Javascript?

5 Answers 5

1 Comment

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related