Newbie - using vars here?

JavaScript
1

I was having something like this:

function activaInput()
{

    document.pedidoOnline.txtOutro.disabled=false;
    document.pedidoOnline.txtOutro.focus=true;
    document.pedidoOnline.txtOutro.click=true;
}

This works fine for one specific input field. But now I would like to make it work for a number of others input fields, and not only txtOutro.

I believe the way to do this is to add an argument on our function that accepts the id of our input field, and use it inside.

Question:
If this is the way to go, how can we add a variable on this line?

document.pedidoOnline.txtOutro.disabled=false;

I’ve tried this but no luck:


document.pedidoOnline.$inputId.disabled=false;

Thanks in advance,
Márcio

I know it’s a very basic question, but I don’t even know the name of a line like this, so I cannot search “variable inside a document.” on google with success.

2

Should be something like:

document.pedidoOnline['$myIdField'].disabled=false;

? For example?

But how does it know that $myIdField is a descendent of the form pedidoOnline?
:nono:

3

forgetting the $ of course I was with my head on ss :s

Regards,
Marcio

4

I believe something like this will do it:

function activaInput(inputID) {
    var theInput = document.pedidoOnline[inputID];
    theInput.disabled=false;
    theInput.focus=true;
    theInput.click=true;
}

Thanks to NicTic.

Regards,
Márcio

5

If you want to retrieve a reference to an element by it’s id attribute, use document.getElementById(inputID);

6

So it’s preferable to have:

document.getElementById(inputID);

then


document.pedidoOnline[inputID];

?

If so, can I ask why, is it a performance issue or it’s related to the fact that if we use the first method we get and id not matter what form we are, hence, we have a more portable code?

Thanks in advance,
Márcio

7

I must have been mistaken, I thought I saw this
document[inputID];
instead of
document.pedidoOnline[inputID];

Still, personally I avoid most of those predefined dom collections, mainly because I don’t fully understand what works correctly cross browser, and they really seem to be a minefield because of the way the distinction between names and id’s get blurred, all piled into the same structures. I also don’t like how sometimes you get an a single element reference, and sometimes you get a collection if you have multiple elements that happen to share the same identifier as a name and id.

I lean towards using the dom methods to get at stuff. The behavior is more consistant and intuitive imo. Again, this is because I simply don’t understand in enough detail how some of those predefined collections work in the various browsers and versions, so I just avoid it.

8

I see. Having some (little experience) with css cross browser issues, I cannot even imagine dealing with 3 or for times more due to DOM levels and interpretations on different browsers.

Can I please ask one last question, given the code above (the initial one) how would your re-write it, using DOM methods?

Thanks again,
Márcio

9

Take the function of oikram and replace document.pedidoOnline[inputID] by document.getElementById(inputID)

10

So, both lines on the liink “function of oikram” are indeed representing the same thing? The only difference is that one is traveling along the DOM tree structure and the other is using a DOM method.

Is this precise?