Question

I’m refactoring some(body else’s) code and, I’ve seen this before some time ago, and I don’t remember the reason why it’s happening. There’s a SELECT tag in HTML that looks like this:

<SELECT id="model"></SELECT>

In JavaScript, there is a statement which adds an option to the SELECT tag:

model.options[i]=option;

This works fine in Internet Explorer (tested in IE 7 and 8) for some reason. It should fire an error but it does not. However, in a browser like FireFox, this raises an error, as it should, for the code should be:

document.getElementById("model").options[i]=option;

What is the reason behind this, besides the fact that Internet Explorer prefers not to conform to W3C standards? Is this just an issue with SELECT or any number of tags?

Thank you!

Answer 1

If I recall correctly, Internet Explorer creates global variables corresponding to the id attributes of elements.

So when you create an element…

<select id="wtv"></select>

… under the hood IE initializes a global variable wtv to be a DOM object for that element. But the other browsers don’t do this, so wtv is undefined.

Some citations:

• MSDN Blogs – Internet Explorer creates global variables for each object in the DOM
• Internet Explorer – Elements with an ID get a matching global variable in JS.
• Internet Explorer Global Variable Blow ups