Using square brackets to concatenate things in Javascript?

Question

Anyone know why this isn't working?

$('#screen').css({
  'background-image': [bg_num == 1 ? 'josh' : 'jessi'] + '_background.jpg',
  'background-color': 'red'
 });

The background color is getting set, but the image is not.

I've not really had much practice using square brackets in Javascript to get this kind of thing done. Anyone have tips if I'm doing something way wrong? Or no of a nice explanation of their use?

EDIT: And just to be clear, the check itself is actually happening, because if I do the same thing in a console.log() is outputs "josh_background.jpg" just fine. It's just not taking in this css setting function.

I'm confused, what is it you think brackets mean in Javascript (hint: they are not equivalent to parentheses)? — Kirk Woll, Jan 12 '11 at 19:14

user113716 · Accepted Answer · 2011-01-12T19:29:31.220

6

EDIT:

What you were doing was creating an Array literal with the value 'josh' or 'jessi', then concatenating '_background.jpg' onto it, so it technically would work.

The issue is that you're missing the 'url()' part of the background-image value.

'background-image': 'url(' + (bg_num == 1 ? 'josh' : 'jessi') + '_background.jpg)',

...but you should still use the () for grouping instead of constructing an Array.

Original answer:

Use parentheses for grouping instead of square brackets:

'background-image': (bg_num == 1 ? 'josh' : 'jessi') + '_background.jpg',

The only use you'll have for square brackets in javascript will be for getting/setting a property on an object, or for creating an Array literal:

var arr = []; // An Array literal

arr[10] = 'someArrValue'; // set index 10


var obj = {};  // A plain object literal

obj['prop'] = 'someObjValue';  // set the "prop" property

var key = 'prop2';

obj[key] = 'someOtherObjValue'; // set the property referenced in the "key" variable

...oh, they have use in regular expression syntax of course...

edited Jan 12 '11 at 19:29

answered Jan 12 '11 at 19:15

user113716

318,772
63
451
440

1

Note that `['jessi', 'josh'][bg_num] + '_background.jpg'` might work too :-) – Pointy Jan 12 '11 at 19:19
@Pointy: True. More than one way to skin a cat. :o) – user113716 Jan 12 '11 at 19:22
Still can't get the background change to actually take. – Ian Storm Taylor Jan 12 '11 at 19:29
@Ian: Just realized that your code should still technically work, though parentheses would be better. The issue is that you don't have the `url()` part of the value that is needed for the `background-image` property. I updated my answer. – user113716 Jan 12 '11 at 19:30
Figured it out. Needed the "url(*)" around the url. – Ian Storm Taylor Jan 12 '11 at 19:32
Although I do have another question: Using the same parenthesis idea, would I be able to embed a switch condition instead of a ternary? – Ian Storm Taylor Jan 12 '11 at 19:33
@Ian: Yeah, I was distracted by the Array and I missed the actual issue at first. Glad you got it working. :o) – user113716 Jan 12 '11 at 19:34
@Ian: I'm not sure I understand what you mean. You mean something like `((bg_num == 1 && 'josh') || 'jessi')` ? – user113716 Jan 12 '11 at 19:37
Ah don't worry about it, solved it in much easier way. As usual, I'm a fool. – Ian Storm Taylor Jan 13 '11 at 17:55

Using square brackets to concatenate things in Javascript?

1 Answers1