JavaScript action inside HTML5 oninput attribute?

Question

I have been learning HTML5. One of the examples I have encountered uses an input element of type range and an output element (this example currently only works in Chrome, Safari and Opera). The following form produces a slider with the result echoed to the output element.

<form>
   <p>
      <input type="range" id="slideValue" value="50" 
          oninput="slideCurrent.value = parseInt (slideValue.value);" />
      <output id="slideCurrent">50</output>
   </p>
   <input type="submit" value="Send">
</form>

My question concerns the oninput attribute. The oninput attribute contains JavaScript. In pre-HTML5 JavaScript I commonly see JavaScript references to this.value. However in the above HTML5 example the references to slideCurrent and slideValue work (apparently without the need to use getElementById). I believe this is a new way for JavaScript to behave.

Is this new JavaScript method of action documented somewhere?

This could be related: http://stackoverflow.com/questions/3434278/ie-chrome-are-dom-tree-elements-global-variables-here — Digital Plane, Dec 07 '11 at 22:22
It is not new feature, just not very often used. See [this](http://www.javascript-coder.com/javascript-form/javascript-get-form.phtml) — Bakudan, Dec 07 '11 at 22:26
I've found it used here http://www.w3schools.com/html5/tag_output.asp. Maybe the use of this mechanism is being encouraged somewhere in relation to working with HTML5? — Mark McLaren, Dec 20 '11 at 13:29

score 3 · Accepted Answer · edited May 23 '17 at 12:11

3

Code within inline event handlers is scoped to the element, as if it was in a with block.
Therefore, you can use properties of the element as global variables.

This is a little-known and dangerous feature, and is not new to HTML5.

edited May 23 '17 at 12:11

Community

1
1

answered Dec 07 '11 at 22:21

SLaks

868,454
176
1,908
1,964

I don't think that was the question – Bergi Dec 07 '11 at 22:46
@Bergi: Apparently, it was. However, upon re-reading the question, I believe you're right. – SLaks Dec 07 '11 at 22:47
@Bergi, if I could have accepted your and SLaks answers I would have done. Both increased my understanding of the situation. Many Thanks. – Mark McLaren Dec 08 '11 at 11:55

Bergi · Answer 2 · 2011-12-07T22:45:43.183

3

It's a method introduced by IE, that elements' names and ids are references in the global scope. Other browsers have copied it, but it's considered as bad use. Mozilla throws a warning:

element referenced by ID/NAME in global scope. Use WC3 standard document.getElementById() instead...

You can find lots of threads when googling for that. A good article can be found here. In the event handler you can use this as a reference to the element, but the output element should be acessed by standard dom methods.

EDIT: Oh shit, yes, its in the spec: http://www.whatwg.org/specs/web-apps/current-work/#dom-window-nameditem. But with a big red alert:

It is possible that this will change. Browser vendors are considering limiting this behaviour to quirks mode. Read more...

JavaScript action inside HTML5 oninput attribute?

2 Answers2

Linked