3

Look at the following JS code:

alert(myImgId.src);

and corresponding HTML:

<img id="myImgId" src="http://images4.wikia.nocookie.net/__cb20121128141533/logopedia/images/6/6f/Superman_logo.png"></img>

What I expect would happen: A javascript error specifying that it cannot find variable myImgId , basically a sort of NPE while accessing object src of myImgId.

What actually happens: Modern browsers(FF 17 & above, chrome) pick up the DOM element with the given ID automatically. Older versions of browsers like FF 10 throw an error as expected.

Can somebody explain what is happening over here?

JSFiddle link

Divij
  • 878
  • 2
  • 9
  • 18
  • possible duplicate of [Automatically created variables from ids in JS?](http://stackoverflow.com/questions/7114956/automatically-created-variables-from-ids-in-js) – Alnitak Oct 16 '13 at 18:09
  • Oow, i did know this was possible. I tested in opera, chrome, ie(9,10, dont have 8 atm) and worked perfectly. – Misters Oct 16 '13 at 18:14
  • 1
    It's in the HTML5 standard - see http://www.whatwg.org/specs/web-apps/current-work/#named-access-on-the-window-object – Alnitak Oct 16 '13 at 18:21

2 Answers2

2

I gleaned this from another SO question, the question is not really the same as your question, but the answer does answer your question:

Can I Use an ID as a Variable Name?

and here is the good stuff: (all quoted from Sidnicious' answer)

Making global variables automatically is considered bad practice because it can be difficult to tell, looking at some code, whether it is on purpose or you forgot to declare a variable somewhere. Automatic creation of global variables like this doesn’t work in ES5 strict mode and could be phased out phased out in future versions of ECMAScript.

In the browser JavaScript’s global scope is actually window. When you refer to document you get window.document. Best practice for creating a global variable in a browser is to add it to window (global in Node.js)....

...It turns out that most browsers create properties on window (hence global variables) for each id in the document. Many browsers don’t make them read-only, you can overwrite them with your own, but Internet Explorer does.

This is another reason global variables in JavaScript can be dangerous — one of your ids could match a read-only window property (today or in some future browser).

Community
  • 1
  • 1
chiliNUT
  • 18,989
  • 14
  • 66
  • 106
  • this should be a comment, not just a copy and paste of the other guy's answer (even though it is credited) – Alnitak Oct 16 '13 at 18:06
-1

My guess is:

Since you did not declare the variable with var, it is seen as a global variable (global to the entire window) and the browser is automatically hooking it up, since the ID is the same as the object name.

Codeman
  • 12,157
  • 10
  • 53
  • 91
  • 4
    don't just guess - _obviously_ the ID is being automatically added to `window`. What the OP needs is a reference to this in the DOM spec. – Alnitak Oct 16 '13 at 18:00
  • and here it is - http://www.whatwg.org/specs/web-apps/current-work/#named-access-on-the-window-object – Alnitak Oct 16 '13 at 18:23