gacor: Mostrar resultados de formulario calculados con el elemento de salida

El elemento de salida representa el resultado de un cálculo o acción del usuario. Su atributo for puede identificar los controles que contribuyen al valor.

<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);

Hacer comprensible el resultado

Asigne a cada entrada una etiqueta visible y formato de moneda o unidades para la audiencia. Si el resultado se actualiza con frecuencia, considere cómo y cuándo la tecnología de asistencia debe anunciar cambios.

Valide los valores de entrada antes de usarlos en un cálculo consecuente y mantenga los totales del lado del servidor autorizados para compras u otras acciones confidenciales.