How to access variables dynamically by building a string

Question

Looking to achieve something like this:

number = "first";
number2 = "second";

var firstColor = "red";
var secondColor = "blue";

//Changes background to red:
div.style.backgroundColor = number+"Color";

//Changes background to blue:
div.style.backgroundColor = number2+"Color";

When I try this it doesn't not work for me and the styles are not applied. How can I do this dynamically.

Edit:

I have a series of else ifs to pick font text depending on which team is selected. I want to create the variables like this:

 liverpoolColor = "red";

else if(team == "liverpool"){
        for (var x = 0; x < areas.length; x++){
//Then change the color dynamically like this:

            areas[x].style.color = team+"Color";
            }

        }

That way I can remove the else ifs completely and clean up my code:

Are you getting any errors in the console? Are you sure `div` is an HTML element? — qJake, May 08 '14 at 19:57
The above code is just a reference to what Im trying to do. See edit, to see my actual code — Anon Omus, May 08 '14 at 19:59
I don't know why people are down voting the answers. They have been very helpful & I will up-vote. The eval function worked perfect. — Anon Omus, May 08 '14 at 20:09
Kyle and I gave you answers that does the same without the need of evals (a.k.a : evil) — Xeltor, May 08 '14 at 20:10
Yes I then adapted for an assoc array, but the eval function eliminated a lot of code in other areas. The joys of precedural eh? — Anon Omus, May 08 '14 at 20:35
@AnonOmus There is pretty much no circumstance where `eval` is the right way to go. The answers have downvotes because they are promoting bad practice as a quick fix solution to the problem. Your question is downvoted because this is a common problem that has been solved countless times on StackOverflow, including in the question I've linked to above. — lonesomeday, May 08 '14 at 22:01

score 1 · Answer 1 · answered May 08 '14 at 19:59

1

Use a object like this:

var colors = {
    firstColor: "red",
    secondColor: "blue"
};

div.style.backgroundColor = colors[number+"Color"];

answered May 08 '14 at 19:59

Kyle Paulsen

956
1
8
22

1

Not sure why this got rated down... its basically the same answer as this: http://stackoverflow.com/questions/5187530/variable-variables-in-javascript AND it doesn't use eval... please don't use eval. – Kyle Paulsen May 08 '14 at 20:05

score 1 · Answer 2 · answered May 08 '14 at 20:00

1

User eval method like this:

//Changes background to red:
div.style.backgroundColor = eval(number+"Color");

//Changes background to blue:
div.style.backgroundColor = eval(number2+"Color");

answered May 08 '14 at 20:00

Cute_Ninja

4,742
4
39
63

Xeltor · Answer 3 · 2014-05-08T20:06:11.837

0

Do you need something like this ?

$('div').css('background-color', firstColor);

EDIT

Then you need this :

var colors = {
    'first' = 'red',
    'second' = 'blue'
}

var myColor = colors['first'];

edited May 08 '14 at 20:06

answered May 08 '14 at 19:59

Xeltor

4,626
3
24
26

OP didn't mention JQuery anywhere. This won't work if he does'nt have JQuery loaded. – NMC May 08 '14 at 20:03

score 0 · Answer 4 · answered May 08 '14 at 20:15

0

Try something like this:

var colors = {
    "liverpool":"red",
    "barcelona":"green"
};

// Assume you have team = "liverpool"
div.style.backgroundColor = colors[team];

So depending on the team, the color will be applied.

answered May 08 '14 at 20:15

The Alpha

143,660
29
287
307

score -4 · Accepted Answer · answered May 08 '14 at 20:01

-4

JavaScript eval() function can help with that...

//Changes background to red:
div.style.backgroundColor = eval(number+"Color");

answered May 08 '14 at 20:01

Kornfeld Eliyahu Peter

95
6

How to access variables dynamically by building a string

5 Answers5