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.


24 Comments so far
Leave a comment

Thanks, I saw this posted on the YUI boards and will try to remember it going forward.

Comment by David Runion

Stuart —

It’s not that IE can’t handle them being named the same, it’s an issue with the way that IE makes global variables. When IE parses a page, it “auto-magically” creates global vars for anything that it finds with an id/name attribute. The term I use for it is “global namespace polluting”, Mozilla does too.

Comment by Dav Glass

Thanks for posting this Stuart. Saved me some time wondering what the hell IE was choking on.

Comment by Joshua Bloom

In your code:

container = document.getElementById(‘container’);

Perhaps your variable container is a reserved/keyword.

,,,.º¿º.,,,

Comment by Joe

Hi,

How to handle getElementById(‘tableid ‘).add one row in a table

Comment by Muthu kumar

Thanks this helped a lot! Every day i grow more and more annoyed with IE. Also to add to Stuarts comment a good friend once told me “every global variable is doing you damage”…

Comment by Matt Fellows

Thanks for this! It’s been doing my head in for the past 20 minutes!

Comment by Michael Smith

[…] Thanks, Stuart. […]

Pingback by two seven » Blog Archive » JS vs. IE; round two.

OK, but what is the cure? Now that you have located the problem, what does one do about it??
Thanks — David

Comment by David W

@David: As I said in the last paragraph, either change the name of the variable, or make the variable local to the function.

Comment by Stuart Grimshaw

how to handle getElementById for tableId(“getElementById(“tableID”). need to add a row for the table.
Thanks… uday

Comment by uday

Praise: Geez, it was so obvious! TY, you have saved me a lot of googling!

Comment by Adam

Thanks! You saved me a lot of time. Made my variables local to the function and the problem went away. And I hate IE.

Comment by Tom

[…] a mesma coisa para o método getElementById mas agora, descobri esse outro problema, que graças ao Stubblog descobri a […]

Pingback by Erro “object doesn’t support this property or method” ao usar getElementById no IE - Blog do yogodoshi - Tecnologia, Blogosfera, web 2.0 e Humor é claro!

I’ve found that IE doesnt like if you call the variable with the same name of the ID.

Comment by Alex

Thank you sooooo much for this. I was about to rip my head off when I found this post.

MS are such cretins at times!

Comment by David

Goodday I’m new here
And it looks like a interesting forum, so just wanted to say hello! :):):)
And looking forward to participating.
Going on vacation for a few days, so i’ll be back

Comment by wowbassitty

THANK YOU!!!

Comment by BK

Found this on another forum. Worked for me.

————- Quoted Text —————

hit this javascript error last night testing a Firefox developed code based for bugs in IE

“object doesn’t support this property or method”

I think it was because i had this pattern going:

f_name=document.getElementById(‘f_name’);

Adding a var fixed the problem IE.

var f_name=document.getElementById(‘f_name’);

(IE, remember that app with the blue e?, I only used it for Testing & Support these days, boy is it a chore to debug javascript with IE compared to Firefox!)

Comment by DonnieT

@DonnieT : Adding the “var” keyword before the variable names makes it local/private to the method in which it’s defined, which is what I’m doing.

Comment by Stuart Grimshaw

Same problem… ;-)

Solved thanks to you

Claudio

included this reference here in the source code

Comment by Claudio Klemp

Duuuuuude.
Thanks so much for this solution.
Solved my prob. too.

Amazing how IE continues being buggy…

Comment by Bruno420

thank you for solution.
already, I can silved my problem.

Comment by Chumpol M.

Thanks for this post, yep solved my problem.

I’m never surprised at how IE continues to breaks things for stupid reasons

Comment by Thomas G




Leave a comment