Javascript Dom Quirk In IE using getElementById

by frank on April 24, 2008

in Tips of the Week

This is a fun one I found today – using getElementById() in IE7 to find a dom element on the page, if you are getting some interesting errors then one possibility is that you have two elements with the same id – or the same name attribute it seems.

The first thing to check really – have a look through the source code for another dom element of the same id. The generated source code if your page is dynamically creating some dom elements.

However, if you cannot find that then perhaps an element of the same name exists which is confusing IE and apparently some versions of Opera.

input name="unique_id"

can be returned when attempting to retrieve:

input id="unique_id"

So, hopefully you have found this solution and stopped swearing at the screen by now. This error can throw up all manner of interesting error codes depending on your javascript.

Another useful tip I found which made debugging this dom quirk a little easier was this one liner command for emptying the temporary files on IE7:

RunDll32.exe InetCpl.cpl,ClearMyTracksByProcess 8

This saved me a lot of mouse clicks!

Tagged as: Javascript, tip

Was this article useful?

rss feed icon

Email this article to yourself or...

rss feed icon

Subscribe to the RSS feed for more useful articles and tips.

Share this article with others

  • del.icio.us
  • Twitter
  • Reddit
  • StumbleUpon
  • Facebook
  • Digg
  • http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html Max

    As reported here:

    http://webbugtrack.blogspot.com/2007/08/bug-152-getelementbyid-returns.html

    This bug does affect IE6 and IE7, but is mostly fixed in the Beta of IE8 (there are still some issues)

    Opera fixed their bug (a copy of the broken IE behavior) in version 9.25

    PS If this is the first time you have been bitten by an IE bug like this, you’ll want to do some serious research on Web Bug Track. IE tops our list of DOM bugs.

  • Barry

    Hi

    Said plain & simple:
    I’ve created an insertBefore() div on my page.
    Together with the above I created a “delete” button calling a function to hide this created div(e.g myCreatedDiv).
    The delete link works fine with div’s that was loaded with the page, but javascript displays an Error: Object Required when trying to delete(hide) the dynamically created div’s.
    I also had a look at the source code of the page after the insertBefore() function was called, but couldn’t see the created div(it displays well on the page though)
    My opinion is that the getElementById function cannot find the specified div (id = “myCreatedDiv”)created with insertBefore(), but it can find div’s that was loaded with the page.

    How do i get past this error?

  • http://deadlytechnology.com franktank

    I think you should check that you are viewing the generated source code of the page after the javascript function is called, to ensure you are not viewing the original source code of the page.

    I would also use firebug to inspect the DOM of the page, look for a generated div.

    You should not have more than one element on the page with the same id, this will confuse the javascript no doubt, and as mentioned in this post you should not have a form with a name attribute that clashes with your id either.

    Try playing around with other methods to retrieve the divs you add to the page, you could add classes to all of them then retrieve all the elements by class name (I’d use a library for this like YUI) and make sure that the divs are being added to the page and you can retrieve them. Then modify this method to add an id or what have you to each div which is unique and try retrieving divs with their unique ids.

    Hope that helps

  • tonman

    Helpful post. Please note that even if you have (html)commented out other objects from your code like so , and those have the same id, you will continue to get this bug.
    If you have been debugging, when you are ready to go live, remember to delete all those commented out objects which are not needed, or rename their ids/names.

  • http://www.mtthwkfmn.com Matt Kaufman

    Yeah, there are a lot of hidden div’s and a lot of communication and information access ease …… It’s a bit (….. are you serious??) :).

    But yeah.