gacor: Show calculated form results with the output element

The output element represents the result of a calculation or user action. Its for attribute can identify the controls that contribute to the value.

<label for="quantity">Quantity</label>
<input id="quantity" type="number" min="1" value="1">
<label for="unit-price">Unit price</label>
<input id="unit-price" type="number" min="0" step="0.01" value="12.50">
<output id="total" for="quantity unit-price">12.50</output>

const quantity = document.querySelector("#quantity");
const unitPrice = document.querySelector("#unit-price");
const total = document.querySelector("#total");

function updateTotal() {
  total.value = String(Number(quantity.value) * Number(unitPrice.value));
}

quantity.addEventListener("input", updateTotal);
unitPrice.addEventListener("input", updateTotal);

Make the result understandable

Give each input a visible label and format currency or units for the audience. If the result updates frequently, consider how and when assistive technology should announce changes.

Validate input values before using them in a consequential calculation, and keep server-side totals authoritative for purchases or other sensitive actions.