HTML and CSS Reference
In-Depth Information
To update the value of an
<output>
element, you can set the
value
property:
element
.
value
=
newValue
;
What to do for browsers that don't support <output>
To access the element in browsers that don't support
<output>
, you'll need to give the
element an ID and use
document.getElementById
instead:
var
element
=
document
.
getElementById
(
'outputid'
);
To update the value of the element, set the
innerHTML
property:
element
.
innerHTML
=
newValue
;
Let's add the code you need to update the totals in your order form example.
Step 4: Display updated totals on the order form
Add the code from the next listing to app.js, right after the code from the previous listing
and before the terminating bracket of the
for
loop.
Listing 2.10. app.js—Displaying updated totals using the
<output>
element
Try it out!
At this point, the calculation of item line and overall order total values should be working.
Load the page in a modern browser and try changing the value of the quantity fields—you
should notice the totals change accordingly. This is demonstrated in the screenshot in
figure
