コーディングクイズ No.25：JavaScript（DOM操作）

✅ 正解：C

解説

oninput イベントは、input要素の値が変更された瞬間に発火するイベントです。ユーザーがキーを押したり、スピナーボタンをクリックしたりするたびに即座に反応するため、リアルタイムでの価格更新に最適です。

• 選択肢A: onclick イベントは要素がクリックされた時のみ発火するため、キーボード入力での数量変更を検知できません。numberタイプの入力フィールドでは不十分です。
• 選択肢B: onchange イベントは値が変更されてからフォーカスが外れた時に発火するため、リアルタイム更新には適していません。ユーザーが入力中に価格を確認したい場合に対応できません。
• 選択肢C: 【正解】oninput イベントは入力値が変更された瞬間に発火するため、リアルタイムでの価格更新に最適です。ユーザーエクスペリエンスが大幅に向上します。
• 選択肢D: onblur イベントは要素からフォーカスが外れた時のみ発火するため、入力中の値の変更を検知できません。リアルタイム更新には不向きです。

ECサイトのような商用サイトでは、ユーザーが数量を変更する際に即座に価格が更新されることで、購入の意思決定をサポートできます。また、入力エラーがあった場合も素早く気づけるため、ユーザビリティの向上にも繋がります。

document.querySelector('.quantity-input').addEventListener('input', function(e) {
  const quantity = parseInt(e.target.value);
  const cartItem = e.target.closest('.cart-item');
  const price = parseInt(cartItem.dataset.price);
  const itemTotal = cartItem.querySelector('.item-total');
  
  // 商品の小計を更新
  const subtotal = price * quantity;
  itemTotal.textContent = subtotal;
  
  // 合計金額を更新
  updateTotalPrice();
});

function updateTotalPrice() {
  const allTotals = document.querySelectorAll('.item-total');
  let total = 0;
  allTotals.forEach(item => {
    total += parseInt(item.textContent);
  });
  document.getElementById('total-price').textContent = total;
}

このコードでは、入力値が変更されるたびに商品の小計と合計金額が自動的に更新されます。ユーザーは入力と同時に価格変更を確認できるため、より良いショッピング体験を提供できます。