HTML: output

The <output> element displays the result of a calculation or user action.

Minimal example

<label for="price">Price</label>
<input id="price" type="number" value="10">
<label for="quantity">Quantity</label>
<input id="quantity" type="number" value="2">
<output id="total" for="price quantity">20</output>

const total = document.querySelector('#total');
total.textContent = String(price.value * quantity.value);

The for attribute can list the ids of the controls used to produce the result. Update the output whenever the input values change.

Give the result context

Use visible text or a nearby label so users know what the number means. Do not rely on a bare changing number without context.

Common mistakes

• Do not treat output as an input value that is automatically submitted with a form.
• Keep the displayed result synchronized with the values used for the calculation.
• Make sure the result remains understandable when JavaScript is unavailable or fails.