gacor: Afficher les résultats du formulaire calculé avec l'élément de sortie

L'élément de sortie représente le résultat d'un calcul ou d'une action utilisateur. Son attribut for peut identifier les contrôles qui contribuent à la valeur.

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

Rendre le résultat compréhensible

Donnez à chaque entrée une étiquette visible et formatez la devise ou les unités pour le public. Si le résultat est mis à jour fréquemment, réfléchissez à la manière et au moment où la technologie d'assistance doit annoncer les changements.

Validez les valeurs d'entrée avant de les utiliser dans un calcul conséquent et conservez les totaux côté serveur faisant autorité pour les achats ou autres actions sensibles.