HTML and CSS Reference
In-Depth Information
Listing 3-19 shows how to implement this in HTML5, and Listing 3-20 shows
how you might have done this in HTML4. The
for
attribute can be used to
specify the related inputs used for the calculation.
Listing 3-19.
Using the Output Element in HTML5
<form action="calculate.php" name="calculate">
<input type="number" name="a" value="0" /> +
<input type="number" name="b" value="0" /> =
<output name="c" for="a b" />
</form>
<script type="text/javascript" charset="utf-8">
function calculate(){
var form = document.calculate;
form.c.value = form.a.valueAsNumber + form.b.valueAsNumber;
}
document.calculate.addEventListener("input", calculate);
</script>
Listing 3-20.
Creating Something Similar to Output in HTML4
<form action="calculate.php" name="calculate">
<input type="number" name="a" value="0" /> +
<input type="number" name="b" value="0" /> =
<span id="c" />
</form>
<script type="text/javascript" charset="utf-8">
function calculate(){
var form = document.calculate;
document.getElementById('c').innerText = form.a.valueAsNumber +
form.b.valueAsNumber;
}
document.calculate.addEventListener("input", calculate);
</script>
