Using variable as value in object assignment - JavaScript

Question

If we have the following code

<ul>
    <li id='car'>ok</li>
    <li id='color'>dd</li>
</ul>

I can apply a name attribute directly with the following code

car.setAttribute('name', 'bmw');

However what if I want to use a variable in the place of car.

var z = 'car';
z.setAttribute('name', 'bmw');

This doesn't work. Or harder still, what about using both?

var z = 'r';
ca + z.setAttribute('name', 'bmw');

Also doesn't work.

Is this possible?

c is a string. setAttribute is a [DOM element method](http://www.w3schools.com/jsref/met_element_setattribute.asp). What are you expecting to happen exactly? — yuvi, Oct 06 '14 at 15:45
c is a string. it doesn't have a `setAttribute` method. That'd be something in a DOM object. you'd want `var c = document.getElementById('car'); c.setAttribute(...)` — Marc B, Oct 06 '14 at 15:45
When I statically type the id *car.setAttribute* it works, so I am trying to pass a variable in place of car, *var.setAttribute* — gummage, Oct 06 '14 at 15:46
@gummage you mean (correct me if I'm wrong) you want to `setAttribute` to an empty `variable` ?? — Roko C. Buljan, Oct 06 '14 at 15:50
because ids are available globally as variables that represent the dom elements.You can't just access them as strings (if you have this: `var x = {'foo': 'bar'}` you can do `x.foo` but you can't do `"x".foo`) — yuvi, Oct 06 '14 at 15:50
@gummage I mean, `'car'` is a string and `.setAttribute()` does *not* apply to Strings. What are you actually trying to achieve? Is there a mystique reason for all that? — Roko C. Buljan, Oct 06 '14 at 15:52
@RokoC.Buljan T.J Crowder provided a answer - *window[ca + 'r'].setAttribute('name', 'car');* however because of the global advice he gave, I will do it differently. — gummage, Oct 06 '14 at 15:52
@gummage ohh I see now, but than your question is a bit misleading. I would ask rather: "Given `foo` is a variable, how to point to that variable using String `"foo"`. Any way this question is a duplicate. — Roko C. Buljan, Oct 06 '14 at 15:55

score 2 · Answer 1 · answered Oct 06 '14 at 15:45

2

Use document.getElementById to look up the element:

document.getElementById(c).setAttribute('name', 'car');

document.getElementById('ca' + c).setAttribute('name', 'car');

answered Oct 06 '14 at 15:45

Barmar

741,623
53
500
612

`setAttribute` is a method of DOM elements. – Barmar Oct 06 '14 at 15:47
1

That's different from what he's trying to do in the question, so I don't think it's relevant. – Barmar Oct 06 '14 at 15:49
OK, given he's got HTML there I suppose it's a fair assumption after all. – Alnitak Oct 06 '14 at 15:51

T.J. Crowder · Accepted Answer · 2014-10-06T15:51:07.460

It looks like you're relying on the automatic globals that browsers create for elements that have ids (which I don't recommend). If so, you can do it by using the window object:

var c = 'car';
window[c].setAttribute('name', 'car');

var ca = 'ca';
window[ca + 'r'].setAttribute('name', 'car');

All global variables are properties of the global object, which you can access as window on browsers. (In fact, window itself is a property of the global object, which it uses to refer to itself.) In JavaScript, you can refer to properties on objects using dot notation and a literal name (obj.foo), or bracketed notation and a string name (obj["foo"]). In the latter case, the string can be the result of any expression, including a variable lookup.

I don't recommend relying on automatic globals, though, the global namespace is really crowded and other things (declared variables, functions) can shadow the elements. Use getElementById instead:

var c = 'car';
document.getElementById(c).setAttribute('name', 'car');

var ca = 'ca';
document.getElementById(ca + 'r').setAttribute('name', 'car');

Side note: name isn't a valid attribute for li elements.

Alnitak · Answer 3 · 2014-10-06T15:52:35.573

You can't (without resorting to eval) access local variables by string.

You can (but shouldn't) do it with global variables, or if the variable in question is actually a property of another object (the former being a special case since global variables are in reality properties of the window object), i.e.:

var o = {};
o.car = document.getElementById('car');
o.color = document.getElementById('color');

var c = 'car';
o[c].setAttribute('name', 'bmw');

Using variable as value in object assignment - JavaScript

3 Answers3