Is it possible to use variables as dom elements?

Question

I have a several input fields in a form each having a unique name. For example, to change the color I would do:

testForm.username.style.background = "yellow";

username being the name of the input and testform being the form name

I want to do this: replace username with a variable elem so that when I call the function to change the background color I don't need to have a separate function for every unique field. I would just send the elem name and that function would work for every field.

testForm.elem.style.background = "yellow";

My problem is it doesn't work. For example it passed the elem into the function fine, but it says that testForm.elem.style is null. For some reason javascript doesn't like variables for element names I'm guessing?

Does this answer your question? [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — outis, Nov 03 '21 at 07:24

score 5 · Accepted Answer · answered Aug 18 '09 at 16:59

5

var elem = 'username';
testForm[elem].style.background = 'yellow';

answered Aug 18 '09 at 16:59

RaYell

69,610
20
126
152

1

Not a good idea. Accessing it off of an `elements` collections would be more reliable and standard-compliant, e.g.: `testForm.elements[elem].style.backgroundColor = 'yellow'` – kangax Aug 18 '09 at 17:07
RaYell thanks for the help, it worked just like I wanted it to. I was under the impression that testForm[elem].style was the same as testForm.elem.style... guess not! What is the advantage of using the elements collection? How does it help me other than being standard compliant? – payling Aug 18 '09 at 17:21
I would also test for existence of an element (and its `style` property) before attempting to modify it - `var el = testForm.elements[elem]; if (el && el.style) el.style.backgroundColor = 'yellow';` – kangax Aug 18 '09 at 17:43

score 1 · Answer 2 · answered Aug 18 '09 at 17:02

1

try

testForm [elem].style.background = "yellow";

or

var elem = testForm.username
elem.style.background = "yellow";

in the first case elem holds the username, and in the second case, elem points to the actual DOM element.

answered Aug 18 '09 at 17:02

Javier

60,510
8
78
126

score 1 · Answer 3 · answered Aug 18 '09 at 17:03

A property of a JavaScript object (in this case, the "username" property of the object "testform") can be accessed using either object.property or object["property"] syntax. As the second form takes a string (as shown by the double quotes), it follows that a variable containing a string can also be used with that syntax. Hence:

testform[elem].style.background = "yellow";

will do what you want.

score 1 · Answer 4 · answered Aug 18 '09 at 17:18

It sounds like you're creating a function to do this anyway. In that case, why not just use the following function:

function changeBackgroundOfElementToYellow(element){
  element.style.background = "yellow";
}

And call it with:

changeBackgroundofElementToYellow(testForm.username);

In general I find the RaYell/kangax method posted already to be better, but this is another option.

score -3 · Answer 5 · answered Aug 18 '09 at 16:58

-3

You'd have to do an eval to do something like that, eg eval("testform." + elem + ".style.background=yellow");

answered Aug 18 '09 at 16:58

maxpower47

1,666
1
10
14

7

Don't use `eval()`, it will only give you a headache. Check this out http://www.jslint.com/lint.html#evil – RaYell Aug 18 '09 at 17:01

Is it possible to use variables as dom elements?

5 Answers5