HTML output element: show a calculation without turning it into an input

An original equipment-packing check needs the combined mass of two cases. Staff enter kilograms; an empty or invalid field should show a request for both masses, rather than a misleading zero.

<form id="packing">
  <label for="case-a">Case A mass, kg</label>
  <input id="case-a" name="caseA" type="number"
         min="0" step="0.1" required>
  <label for="case-b">Case B mass, kg</label>
  <input id="case-b" name="caseB" type="number"
         min="0" step="0.1" required>
  <p><label for="combined">Combined mass</label>:
    <output id="combined" name="combined"
            for="case-a case-b">Enter both masses</output>
  </p>
</form>

const form = document.querySelector('#packing');
const a = document.querySelector('#case-a');
const b = document.querySelector('#case-b');
const combined = document.querySelector('#combined');
function updateMass() {
  const values = [a.valueAsNumber, b.valueAsNumber];
  combined.value = values.every(Number.isFinite) &&
      a.validity.valid && b.validity.valid
    ? (values[0] + values[1]).toFixed(1) + ' kg'
    : 'Enter both valid masses';
}
form.addEventListener('input', updateMass);
updateMass();

Entering 2.4 and 1.6 should display 4.0 kg. Clearing either input should remove that total and ask for valid masses. The MDN output reference, checked October 24, 2026, documents for, form association and the exclusion from submission.

Separate a displayed result from the payload

console.log([...new FormData(form)]);
// With those two entries:
// [['caseA', '2.4'], ['caseB', '1.6']]

There is no combined entry even though the output has that name. A receiving service should compute a trusted total from validated inputs. If an application also sends a displayed total for comparison, add it explicitly and treat it as untrusted browser data. The form submission guide explains the wider rules for which controls contribute values.

The for value contains element IDs separated by spaces. It describes the relationship, while the event listener actually recalculates the result. Changing a.value in code does not fire a native input event; call updateMass() after programmatic updates.

Keep the result short and readable

The output element has an implicit status role. Browsers and assistive technology can announce updated results without moving focus, but announcement behavior varies by browser and screen reader. Test that combination if the announcement matters to the task. Keep this result as plain, concise text instead of putting action buttons inside an announcement.

This calculation uses one decimal place for this packing example; that rounding rule is not suitable for every measurement or financial calculation. Before using a real total, verify its units and precision against the receiving system. Check the blank, valid and invalid states as well as the attractive example with both boxes filled.