I've seen this element around a couple of times in articles but never needed it or decided to see what it can do.
In general, it's supposed to be used as an output for other input elements.
Sounds pretty cool for certain use-cases.
Let's say we need to build a VAT calculator?
The end result:
Using the HTML output element permalink
To use this element we can simply write
But that doesn't mean it actually does anything.
To make it work, it needs a form wrapped around it and some inputs to mix values from.
Let's start by doing that.
oninput="output.value = parseInt(inputOne.value) + parseInt(inputTwo.value)"
<input name="inputOne" type="number" value="2" /> +
<input name="inputTwo" type="number" value="3" /> =
You might think, oh well, but that's cheating you just put some values in there.
The magic comes in running this code. Try and change the input values!
output.value (the name output) equals a parsed one + two.
Note: Their names reference the elements used.
HTML output VAT calculator permalink
Let's say we need an VAT calculator, these general have an input number and a vat percentage.
oninput="output.value = price.valueAsNumber + (price.valueAsNumber * vat.valueAsNumber)"
<input name="price" type="number" value="20" /> +
<input name="vat" type="number" value="0.2" step="0.1" max="1" /> =
As you can see we are no longer using the
parseInt method. Instead we can use the
valueAsNumber on input types. This makes it easier to use decimals.
Then we define the sum function as follows:
output = price + (price * vat)
The names above are all the names used in our HTML.
As you can see, not fancy scripts were needed, and we can fully style this any way we would like!
I hope you learned some good practical use cases for the HTML output element.
Feel free to have a play with this Codepen.
Browser Support permalink
This output element is pretty well supported and goes back to pretty old versions. We do run into issues on IE and Opera mini.