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: stackoverflow.com/questions/3434278/… — Digital Plane
– Digital Plane, Commented Dec 7, 2011 at 22:22
I've found it used here w3schools.com/html5/tag_output.asp. Maybe the use of this mechanism is being encouraged somewhere in relation to working with HTML5? — Mark McLaren
– Mark McLaren, Commented Dec 20, 2011 at 13:29

Community · Accepted Answer · 2017-05-23 12:11:58Z

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, 2017 at 12:11

CommunityBot

11 silver badge

answered Dec 7, 2011 at 22:21

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bergi Over a year ago

I don't think that was the question

SLaks Over a year ago

@Bergi: Apparently, it was. However, upon re-reading the question, I believe you're right.

Mark McLaren Over a year ago

@Bergi, if I could have accepted your and SLaks answers I would have done. Both increased my understanding of the situation. Many Thanks.

Bergi · Accepted Answer · 2011-12-07 22:45:43Z

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...

3 Comments

Ruan Mendes Over a year ago

Not correct, the problem is not globals, but accessing properties of the node from the inline handler as if they were globals, see Slaks explanation

Bergi Over a year ago

@JuanMendes: So you say slideCurrent is a property of the range input?

Ruan Mendes Over a year ago

I misread the question like Slaks did. What he says is true but doesn't apply in this example. Auto globals based on ids have been around for a while but like you said considered bad use. My bad....

Collectives™ on Stack Overflow

JavaScript action inside HTML5 oninput attribute?

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related