Over <output>
De tag <output> is gemaakt om het resultaat van een berekening weer te geven. De inhoud is dus altijd numeriek.
Als er onverhoopt een niet-numerieke waarde in de tag terecht komt, verschijnt de waarde NaN op het scherm.
Het onderstaande voorbeeld, dat ontleend is aan w3schools.com,
illustreert de werking.
Door de schuifregelaar te verzetten of or een ander getal in te vullen verandert de waarde rechts van het isgelijk-teken.
De code van het voorbeeld luidt:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+ <input type="number" id="b" min="-100" max="150" value="25">
= <output name="x" for="a b"></output>
</form>
De code doet het volgende:
- Het formulier heeft een schuifregelaar (<input type="range"> en een invoerveld (<input type="number">).
- De schuifregelaar heeft id="a". De attributen min, max en step zijn niet gegeven en daarom zijn de default-waarden gebruikt: 0, 100 en 1.
- Als de pagina wordt geladen wordt de schuifrelaar op 50 gezet.
- Het invoerveld heeft id="b". De attributen min en max hebben de waarden -100 en
150.
- De <output>-tag heeft id="x". Deze is nodig om de inhoud van de output te kunnen aanpassen.
- De <output>-tag heeft for="a b". Daarmee wordt aangegeven dat de inhoud kan worden gwijzigd
onder invloed van de elementen met id="a" en/of id="b".
- De <form>-tag heeft oninput="x.value=parseInt(a.value)+parseInt(b.value)". Door oninput reageert het formulier op elke verandering van elk invoerelement binnen het formulier.
- In het voorbeeld wordt de waarde van <output> bij elke wijziging van het formulier opnieuw berekend.
- Dit voorbeeld wekt alleen goed met gehele getallen, omdat type="number" niet goed wordt verwerkt. Daarom wordt gewerkt met parseInt en niet met parseFloat. Zie ook de opmerkingen over dit type invoerveld in het item Zelf een mailformulier bouwen.
