Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript action inside HTML5 oninput attribute?

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?

like image 579
Mark McLaren Avatar asked Dec 31 '25 05:12

Mark McLaren


1 Answers

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.

like image 69
SLaks Avatar answered Jan 03 '26 09:01

SLaks



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!