Form elements IDs as global variables in IE11

Question

Do you know why named access [1] does not work in IE11 for form elements (input) inside form?

<div>
 <input id="inDiv" />
 <script>
  document.write(typeof inDiv);
 </script>
</div>
<form>
 <input id="inForm" />
 <script>
  document.write(typeof inForm);
 </script>
</form>

Above snippet writes object object in "any browser except IE11".

In IE11 it writes object undefined.

What is even more strange: in IE11 inline event handler on element in the form sees the "global id" of element in the same form just OK:

h5,h6 { margin: 0;}

<div>
 <input id="i1" value="input i1 in DIV" />
 <h5>What is <code>typeof i1</code> in:</h5>
 <h6>- inline script inside <code>DIV</code>:</h6>
 <script>
  document.write(typeof i1); // `object` in IE11
 </script>
 <h6>- inline event handler inside <code>DIV</code>:</h6>
 <span><img src="" onerror="this.parentNode.innerText = typeof i1; // `object` in IE11" ></span>
</div>
<h6>- inline script outside <code>DIV</code>:</h6>
<script>
 document.write(typeof i1); // `object` in IE11
</script>
<h6>- inline event handler <u>outside</u> <code>DIV</code>:</h6>
<span><img src="" onerror="this.parentNode.innerText = typeof i1; // `object` in IE11" ></span>

<hr>

<form>
 <input id="i2" value="input i2 in FORM" />
 <h5>What is <code>typeof i2</code> in:</h5>
 <h6>- inline script inside <code>FORM</code>:</h6>
 <script>
  document.write(typeof i2); // `undefined` in IE11
 </script>
 <h6>- inline event handler inside <code>FORM</code>:</h6>
 <span><img src="" onerror="this.parentNode.innerText = typeof i2; // `object` in IE11" ></span>
</form>
<h6>- inline script outside <code>FORM</code>:</h6>
<script>
 document.write(typeof i2); // `undefined` in IE11
</script>
<h6>- inline event handler <u>outside</u> <code>form</code>:</h6>
<span><img src="" onerror="this.parentNode.innerText = typeof i2; // `undefined` in IE11" ></span>

<hr>

<h5>Result in IE 11</h5>
<pre>
What is typeof i1 in:

- inline script inside DIV:
object 
- inline event handler inside DIV:
object 
- inline script outside DIV:
object 
- inline event handler outside DIV:
object 

 
What is typeof i2 in:

- inline script inside FORM:
undefined 
- inline event handler inside FORM:
object 
- inline script outside FORM:
undefined 
- inline event handler outside form:
undefined
</pre>

[1] http://w3c.github.io/html/browsers.html#named-access-on-the-window-object

Related questions: Do DOM tree elements with ids become global variables?, Why don't we just use element IDs as identifiers in JavaScript?.

Because that is a _dead_ tech, and no browser should (some still do though) ... and you should **not** do that, as it will not work cross browser and is a really bad way to declare variables — Asons, Aug 26 '18 at 09:55
While it is true that relying on named access / global scope polluter is generally discouraged, frowned upon, and as seen in question even dangerous, it would be nice to have more concrete answers and resources for future reference / historical preservation / valid argumentation. — myf, Jun 24 '19 at 17:41

score 0 · Answer 1 · answered Aug 23 '20 at 23:25

Specifically for INPUTS inside FORM elements, IE for some reason just don't make them globally available, this is not something new, I can track this behavior until IE6.

But actually, what IE does is to make them accessible from the form itself, so, if you have:

<form action="/test" id="myForm">
  <input type="text" id="myField" value="initial value" />
  <div id="other">initial content</div>
</form>

you can access the DIV by its ID, but the INPUT only calling myForm.myField, so this works (in all browsers I was able to test it, including IE6 and IE11):

other.innerHTML      = "Potato!!!";
myForm.myField.value = 'Potato!!!';

Form elements IDs as global variables in IE11

1 Answers1