SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie - using vars here?

    I was having something like this:
    Code JavaScript:
    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?
    Code JavaScript:
    document.pedidoOnline.txtOutro.disabled=false;

    I've tried this but no luck:
    Code JavaScript:
    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. #2
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should be something like:

    Code JavaScript:
    document.pedidoOnline['$myIdField'].disabled=false;
    ? For example?

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

  3. #3
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    forgetting the $ of course I was with my head on ss :s

    Regards,
    Marcio

  4. #4
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe something like this will do it:

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

    Thanks to NicTic.


    Regards,
    Márcio

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to retrieve a reference to an element by it's id attribute, use document.getElementById(inputID);

  6. #6
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So it's preferable to have:

    Code JavaScript:
    document.getElementById(inputID);

    then
    Code JavaScript:
    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. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Take the function of oikram and replace document.pedidoOnline[inputID] by document.getElementById(inputID)

  10. #10
    SitePoint Guru
    Join Date
    Feb 2009
    Posts
    994
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ScallioXTX View Post
    Take the function of oikram and replace document.pedidoOnline[inputID] by document.getElementById(inputID)

    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •