SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Checking if an ID exists

    I've seen numerous examples that seem to be checking to see if an ID exists in the HTML. All these examples utilize "typeof". I can't get it to work that way. I've found that the "typeof" test always passes, and in IE6, a reference to the undefined ID then results in a javascript error.
    For example, if an ID of "hello" is defined in the HTML, then I want to set the color, and if it is not defined, then do nothing:
    var testid = "hello";
    var isDOM = 1; // assume a previous test set this variable
    var myElement;
    if (isDOM && typeof document.getElementById(testid) !="undefined") {
    myElement=document.getElementById(testid);
    myElement.style.color="green";
    }
    If an ID of "hello" does not exist in the HTML code, then this javascript will fail with an error on the line that attempts to set the color. The "typeof" test seems to always return a value of "object".

    But trial and error produced this method which seems to work fine in IE6, NS7, and Opera7:
    var myElement;
    if (isDOM && (myElement=document.getElementById(testid))) {
    myElement.style.color="green";
    }
    Is there a proper way to test if an ID exists?
    Is my method safe to use in a DOM-compliant browser?
    Last edited by bugsalive; Sep 8, 2003 at 09:41.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's because if the id isn't found, null is returned, which is typeof object. The proper test would be
    Code:
    if ( isDom && document.getElementById( testid ) != null )
    However, you can use a short-circuit check, since null triggers a boolean false in a condition, an this also saves you the step of retriving the reference later
    Code:
    if ( isDOM && myElement = document.getElementById( testid ) )
    {
    	myElement.style.color = "green";
    }
    Some people frown on these short-circuit checks, but I've never had one like this cause a problem.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Member
    Join Date
    Jul 2002
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the helpful info on the use of "null". The short-circuit check you suggest does not work properly as written. It always seems to report "true". The extra pair of parends in the example below seems to adjust the precedence so that it works properly.

    if (isDOM && (myElement=document.getElementById(sPage))) {
    myElement
    .style.color="green";
    }

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem with short-circuits like that isn't that they don't work, it's that other developers who read the code (especially any who routinely work in other programming languages where a simple "=" changes meaning depending on context) might mis-understand what's actually happening, and assume that the above is an equality comparison between myElement and document.getElementById(sPage).

    If you can be sure that you're the only developer that will ever work on this code, and that when you revisit this code in 18 months' time, you will quickly recognise what's REALLY happening, then go right ahead. But if I were code-reviewing work for checkin to a corporate codebase maintained by multiple programmers, where there is a realistic chance of developers leaving the project at some point in the next decade, I'd require a change to the more straightforward and obvious:
    Code:
    myElement=document.getElementById(sPage);
    if (isDOM && myElement) {
    myElement.style.color="green";
    }
    For the sake of a percieved "optimisation", that will probably have minimal (if any) effect on performance, and only a trivial effect on code size, you are creating a fairly serious misunderstanding-waiting-to-happen for future code maintenance. People can spend DAYS chasing shadows of bugs because they don't spot stuff like this.

    [end of rant]

    And that's why I frown on them

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point!

    I agree that any code destined to be in a shared developer environement must sacrifice brevity for clarity.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •