Output Element

Calculation results, form outputs, and dynamic content display.

Overview

The <output> element represents calculation results.

Key Concepts

• Form Calculations — Display computed values
• Live Updates — Dynamic result display
• Accessibility — Screen reader announcements
• Event Handling — React to form changes
• Styling — Custom appearance

Code Examples

<form id="calculator">
  <div>
    <label for="num1">Number 1:</label>
    <input type="number" id="num1" value="0">
  </div>
  
  <div>
    <label for="operator">Operator:</label>
    <select id="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">×</option>
      <option value="/">÷</option>
    </select>
  </div>
  
  <div>
    <label for="num2">Number 2:</label>
    <input type="number" id="num2" value="0">
  </div>
  
  <div>
    <label for="result">Result:</label>
    <output id="result" for="num1 operator num2">0</output>
  </div>
</form>

<script>
const form = document.getElementById('calculator');
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operator = document.getElementById('operator');
const result = document.getElementById('result');

function calculate() {
  const a = parseFloat(num1.value) || 0;
  const b = parseFloat(num2.value) || 0;
  const op = operator.value;
  
  let res;
  switch (op) {
    case '+': res = a + b; break;
    case '-': res = a - b; break;
    case '*': res = a * b; break;
    case '/': res = b !== 0 ? a / b : 'Error'; break;
  }
  
  result.textContent = res;
  result.classList.add('updated');
  setTimeout(() => result.classList.remove('updated'), 300);
}

[num1, num2, operator].forEach(el => {
  el.addEventListener('input', calculate);
});

// Shopping cart total
function updateCartTotal() {
  const items = document.querySelectorAll('.item-price');
  const total = Array.from(items).reduce((sum, item) => 
    sum + (parseFloat(item.value) || 0), 0
  );
  document.getElementById('cartTotal').textContent = `$${total.toFixed(2)}`;
}
</script>

<style>
output {
  display: inline-block;
  padding: 8px 16px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.2rem;
  font-weight: bold;
  min-width: 100px;
  text-align: center;
}

output.updated {
  background: #d4edda;
  border-color: #28a745;
}
</style>

Practice

Build a tip calculator using the output element and form inputs.