javascript noob. variables and elements

Question

Total noob here with javascript. I'm trying to alter a function. This is the one that is currently there and works.

function hideStateField(theForm) {
    theForm.state.disabled = true;
    theForm.state.className = 'hiddenField';
    theForm.state.setAttribute('className', 'hiddenField');
    document.getElementById("stateLabel").className = 'hiddenField';
    document.getElementById("stateLabel").setAttribute('className', 'hiddenField');
    document.getElementById("stateText").className = 'hiddenField';
    document.getElementById("stateText").setAttribute('className', 'hiddenField');
    document.getElementById("stateBreak").className = 'hiddenField';
    document.getElementById("stateBreak").setAttribute('className', 'hiddenField');
}

I want to make it more generic so its not specific to the "state" field. So I'm changing the function name to reflect that and adding a 2nd parameter. Then I'm trying to use that 2nd parameter as a variable in place of where we see "state".

function hideAddressField(theForm,theField) {
    theForm.theField.disabled = true;
    theForm.theField.className = 'hiddenField';
    theForm.theField.setAttribute('className', 'hiddenField');
    document.getElementById(theField+"Label").className = 'hiddenField';
    document.getElementById(theField+"Label").setAttribute('className', 'hiddenField');
    document.getElementById(theField+"Text").className = 'hiddenField';
    document.getElementById(theField+"Text").setAttribute('className', 'hiddenField');
    document.getElementById(theField+"Break").className = 'hiddenField';
    document.getElementById(theField+"Break").setAttribute('className', 'hiddenField');
}

I tested it simply with "state" as the 2nd variable to be sure it worked... and it didn't. I keep getting "Uncaught TypeError: Cannot set property 'disabled' of undefined". I'm sure its a syntax error. My call to this function is:

hideAddressField(theForm,state);

The form's name is "theForm" as well so I figured the variable "theForm" was being assigned a value of "theForm" while the variable "theField" was being assigned the value of "state" and the two functions should be equivelant. Obviously not.

Where am I going wrong?

possible duplicate of [Dynamic object property name](http://stackoverflow.com/questions/4244896/dynamic-object-property-name) and [javascript object, access variable property name?](http://stackoverflow.com/questions/4255472/javascript-object-access-variable-property-name) and definitely others. — Felix Kling, Jun 20 '12 at 19:05
Also the MDN documentation might be helpful: https://developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects — Felix Kling, Jun 20 '12 at 19:13

score 1 · Accepted Answer · answered Jun 20 '12 at 19:05

1

You must use theForm[theField] syntax, because "theField" is a variable containing the name of a property, and is not the property itself. Also, you will need to pass state as a string.

answered Jun 20 '12 at 19:05

Niet the Dark Absol

320,036
81
464
592

Could I get more specifics? I tried what I think you mean and now I just get "Uncaught SyntaxError: Unexpected identifier". NEVERMIND! My editor auto-did-something and removed a . I got it now, thanks! Where does one learn about the various syntax and notations? I tried Google first and didn't even know what to search for. – bcsteeve Jun 20 '12 at 19:11
@user1438619: The while MDN JavaScript guide is worth a read: https://developer.mozilla.org/en/JavaScript/Guide – Felix Kling Jun 20 '12 at 19:17
It will be once Mozilla's website comes back to life :) I've been trying to install firefox all day so I can get firebug. – bcsteeve Jun 20 '12 at 19:19

javascript noob. variables and elements

1 Answers1