How to use my JS variable as an array key?

Question

Here's my jQuery, thus far:

var themes = {};
themes['blue'] = {
    'background': 'blue',
    'color': 'white',
};
themes['red'] = {
    'background': 'red',
    'color': 'green',
};

$("#colors").change(function() {
    var theme = $(this).val();
    $("body").css(themes[theme]);

Basically, I am looking to change the css based on what the user selects from the #colors dropdown menu:

<select id="colors">
    <option selected="selected">Colors:</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
</select>

The following worked fine:

var themes = {
    blue: {
        'background': 'blue',
    }
};

$("#colors").change(function() {
    var color = themes['blue'];
    $("body").css(color);
});

But I want to add support for more than just blue and more than just the background. Any advice would be greatly appreciated!

In your case you have your key down as "blue" but the value coming in is "Blue" – I would convert these to the same case. You can use variables as key, just as you have tried. — Toby
– Toby, Commented Jun 23, 2015 at 19:40

Oriol · Accepted Answer · 2015-06-23 19:39:58Z

3

In your options you used Blue and Red, but in the object the property names are lowercase.

So either use the same case everywhere, or use toLowerCase:

var theme = $(this).val().toLowerCase();
$("body").css(themes[theme]);

var themes = {
  blue: {
    background: 'blue',
    color: 'white',
  },
  red: {
    background: 'red',
    color: 'green',
  }
};
document.getElementById('colors').onchange = function() {
  var theme = this.value.toLowerCase();
  Object.assign(document.body.style, themes[theme]);
}

<select id="colors">
  <option selected="selected">Colors:</option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
</select>

answered Jun 23, 2015 at 19:39

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

1 Comment

nickwhetstone Over a year ago

I question my own sanity at times. Thank you!

Daniel K. · Accepted Answer · 2015-06-23 19:45:55Z

0

Use lower case values, because object keys are lower case.

var themes = {
    blue: {
        background: 'blue'
    },

    red: {
        background: 'red',
        color: 'white'
    }
};


$("#colors").change(function() {
    var value = $(this).val().toLowerCase();
    $('body').css(themes[value]);
});

answered Jun 23, 2015 at 19:45

Daniel K.

815 bronze badges

Comments

Nikhil Aggarwal · Accepted Answer · 2015-06-23 19:50:40Z

0

With the multiple color themes support for an application, we can also follow a more robust approach like following.

Update your html and add the following in head

<link id="theme-scheme" rel="stylesheet"/>

Now, for every theme create its specific theme-{theme_name}.css, for e.g. for blue you can have theme-blue.css and for red you can theme-red.css

So, now update your function like the following

$("#colors").change(function() {
    var theme = $(this).val().toLowerCase();
    $('#theme-scheme').attr('href', '/your_base_path/theme-' + color + '.css');
});

This approach gives you flexibility to add any style on any element without having additional dependency on script for every style.

answered Jun 23, 2015 at 19:50

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to use my JS variable as an array key?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related