Why does this code work even though the object is not defined in the javascript code?

Question

I was using JSLint and it is saying: 'matte_canvas' is not defined. Obviously, in my javascript code I don't have 'matte_canvas' defined, however, it does output the canvas element in the console.

Here is the code I have:

HTML:

<canvas id="matte_canvas" width="50" height="50" style="background-color:blue;"></canvas>

Javascript:

console.log(matte_canvas);

Here it is on JSFiddle: http://jsfiddle.net/allisonc/rqo5a417/

Can someone please explain to me how it is working?

Thanks! I had no idea what to even search for. – AllisonC Jan 14 '15 at 22:22 — AllisonC, Jan 14 '15 at 22:22

score 2 · Answer 1 · edited Apr 11 '23 at 08:31

2

ids are also globals (if no other value was assigned to them). Don't rely on this.
This also works for the name attribute on certain elements: a, applet, area, embed, form, frameset, img, and object.

alert(window.matte_canvas);

More info: https://html.spec.whatwg.org/multipage/nav-history-apis.html#named-access-on-the-window-object

edited Apr 11 '23 at 08:31

user3840170

26,597
4
30
62

answered Jan 14 '15 at 22:16

Jonathan

8,771
4
41
78

I didn't know that. I plan to fix my code, I was just curious why it was working. – AllisonC Jan 14 '15 at 22:23

Why does this code work even though the object is not defined in the javascript code?

1 Answers1