JavaScript functions from an array

Question

quick question.

I have an array with 3 functions. When I call the specific function I want to perform it does not respond to the specific index within the array. It just performs all functions till it gets to the last function.

Here is the code:

<p id="sometext">Change Color</p>
<script>
    function paintRed() {
        var text = document.getElementById('sometext');
        text.style.color = "red";
    }

    function paintBlue() {
        var text = document.getElementById('sometext');
        text.style.color = "blue";

    }
    function paintYellow() {
        var text = document.getElementById('sometext');
        text.style.color = "yellow";

    }

    var arrcolor = [ paintRed(), paintBlue(), paintYellow()];

    arrcolor[0]; //This returns the yellow color and not red//

</script>

So my

Change Color

always returns as yellow (The last function in the array) regardless of which index I call i.e (arrcolor[0],arrcolor[1]).

Hope it makes sense. Thanks.

Dexygen · Accepted Answer · 2016-06-18 13:02:57Z

5

You can only put the function name (actually, reference) in the array and execute it like this

var arrcolor = [ paintRed, paintBlue, paintYellow];

arrcolor[2]();

JSFIDDLE

An alternative way of doing same is creating an object and put each of the function inside it

var changeColor = {
  paintRed :function(text){
     text.style.color = "red";
   },

   paintBlue :function(text){
     text.style.color = "blue";
   },
   paintYellow:function(text){
       text.style.color = "yellow";
    }

}
var text = document.getElementById('sometext');
changeColor.paintRed(text)

JSFIDDLE

edited Jun 18, 2016 at 13:02

Dexygen

12.6k13 gold badges87 silver badges154 bronze badges

answered Jun 18, 2016 at 12:45

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

2 Comments

Dexygen Over a year ago

I'm not going to get into an edit war here. It's a reference, and by calling it that, you might educate somebody (or is it you that needs the educating?)

brk Over a year ago

@GeorgeJempty I think I updated my answer . You have liberty edit if it is necessary also I don't know which war you are talking about

Sergio Moura · Accepted Answer · 2016-06-18 12:45:07Z

4

You shoud add the functions to the array, instead of calling them, like so:

var arrcolor = [ paintRed, paintBlue, paintYellow ];

Later, you can call each of them:

arrcolor[0]();

Don't forget the final (), as you're calling a function.

answered Jun 18, 2016 at 12:45

Sergio Moura

4,9321 gold badge25 silver badges39 bronze badges

Comments

hgoebl · Accepted Answer · 2016-06-18 12:45:53Z

1

I think it should read like this:

<p id="sometext">Change Color</p>
<script>
    function paintRed() {
        var text = document.getElementById('sometext');
        text.style.color = "red";
    }

    function paintBlue() {
        var text = document.getElementById('sometext');
        text.style.color = "blue";

    }
    function paintYellow() {
        var text = document.getElementById('sometext');
        text.style.color = "yellow";

    }

    var arrcolor = [ paintRed, paintBlue, paintYellow];

    arrcolor[0]();

</script>

Description: array stores only a function reference and when you dereference it, then it will be called.

answered Jun 18, 2016 at 12:45

hgoebl

13.1k9 gold badges51 silver badges74 bronze badges

Comments

Mars Cheng · Accepted Answer · 2016-06-18 12:48:22Z

0

Remove the brackets following the function names var arrcolor = [ paintRed(), paintBlue(), paintYellow()].

You have already called the functions when you declare and initialise arrcolor, therefore it will be storing the return values from the functions, which in this case will give [undefined, undefined, undefined].

answered Jun 18, 2016 at 12:48

Mars Cheng

313 bronze badges

Comments

Marek Woźniak · Accepted Answer · 2016-06-18 12:50:04Z

0

is that because you execute each function in array, but last one is paintYellow()

look:

var arrcolor = [ paintRed(), paintBlue(), paintYellow()];

now your arrcolor has 3 elements which are "undefined", because each of your function doesn't return any data (you can check it - typeof(arrcolor[0]) == "undefined"). If you want to call first element you should define your array as "pointers of functions", like that:

var arrcolor = [ paintRed, paintBlue, paintYellow];

and then execute your selected paintRed:

arrcolor[0]();

answered Jun 18, 2016 at 12:50

Marek Woźniak

1,7961 gold badge17 silver badges34 bronze badges

Collectives™ on Stack Overflow

JavaScript functions from an array

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related