Stubblog


document.getElementById() vs IE
February 6, 2007, 2:41 pm
Filed under: debug, development, firefox, ie, javascript, webapp

I’m currently writing a webapp that is required to work on Ie as well as Firefox, nothing too amazing in that. I’m willing to bet that many developers follow the same workflow as me … develop using Firefox, then make sure it works in IE. Using tools such as theYahoo UI toolkit, Dojo or one of the many other toolkits that helps with cross browser compatability, this task is a lot less fraught than it used to be. Occaisionaly the, you get a good one …

object doesn't support this property or method

I’ve spent the best part of this morning tracking down this bug, which only occurs in IE. My origional code was this:

container = document.getElementById('container');

Which I immediatly changed to

container = YAHOO.util.Dom.get('container');

but that didn’t help much either, YAHOO.util.Dom.get uses document.getElementByI() anyway, so it just moved the problem further up the call stack.

Anyway, to cut a long story short, and to stop you spending as much time reading this post as I did finding the problem, it turns out that IE cannot handle global variables with the same name as an DOM element ID, especially if that variable is actually pointing at that DOM node!!

As Dav Glass explained in reply to my post on the YDN Javascript list, what’s actually happening is that when parseing the page, IE automagically creates a global variable for anything it find with an ID or NAME tag.

In my code, making the variable a private member was actually the right thing to do, but if you absolutly positivly have to make that var global, just make sure it doesn’t share it’s name with the element your trying to get at.