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.

Answer 1

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

• Dexygen: 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: @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

Answer 2

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.

Answer 3

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.

Answer 4

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].

Answer 5

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]();