【JavaScript】input 入力値のリアルタイム計算と表示方法｜input イベント・数値変換・消費税計算・BMI・ショッピングカートまで解説

<input type="number" id="num1" placeholder="数値1">
<input type="number" id="num2" placeholder="数値2">
<p>合計: <span id="result">0</span></p>

const num1 = document.getElementById("num1");
const num2 = document.getElementById("num2");
const result = document.getElementById("result");

function calculate() {
  const a = parseFloat(num1.value) || 0;
  const b = parseFloat(num2.value) || 0;
  result.textContent = a + b;
}

// input イベント: キー入力のたびにリアルタイム発火
num1.addEventListener("input", calculate);
num2.addEventListener("input", calculate);

// リアルタイム（推奨）
input.addEventListener("input", calculate);

// 確定時のみ
input.addEventListener("change", calculate);

// パターン1: || 0 でデフォルト値
const val1 = parseFloat(input.value) || 0;

// パターン2: Nullish coalescing（NaN には効かないので注意）
// parseFloat("") は NaN → || 0 が必要

// パターン3: isNaN でチェック
const raw = parseFloat(input.value);
const val2 = isNaN(raw) ? 0 : raw;

// パターン4: Number + || 0（空文字は0になるので安全）
const val3 = Number(input.value) || 0;

<label>税抜価格: <input type="number" id="price" min="0"> 円</label>
<p>消費税（10%）: <span id="tax">0</span>円</p>
<p>税込価格: <strong><span id="total">0</span>円</strong></p>

document.getElementById("price").addEventListener("input", function () {
  const price = parseFloat(this.value) || 0;
  const tax = Math.round(price * 0.1);
  const total = price + tax;

  document.getElementById("tax").textContent = tax.toLocaleString();
  document.getElementById("total").textContent = total.toLocaleString();
});

<input type="number" id="height" placeholder="身長(cm)" min="1">
<input type="number" id="weight" placeholder="体重(kg)" min="1">
<p id="bmi-result">BMI: --</p>
<p id="bmi-judge"></p>

function calcBMI() {
  const h = parseFloat(document.getElementById("height").value);
  const w = parseFloat(document.getElementById("weight").value);

  if (!h || !w || h <= 0 || w <= 0) {
    document.getElementById("bmi-result").textContent = "BMI: --";
    document.getElementById("bmi-judge").textContent = "";
    return;
  }

  const bmi = w / ((h / 100) ** 2);
  const judge = bmi < 18.5 ? "低体重"
    : bmi < 25 ? "標準"
    : bmi < 30 ? "肥満1度" : "肥満2度以上";

  document.getElementById("bmi-result").textContent = `BMI: ${bmi.toFixed(1)}`;
  document.getElementById("bmi-judge").textContent = `判定: ${judge}`;
}

document.getElementById("height").addEventListener("input", calcBMI);
document.getElementById("weight").addEventListener("input", calcBMI);

<table id="cart">
  <thead><tr><th>商品</th><th>単価</th><th>数量</th><th>小計</th></tr></thead>
  <tbody>
    <tr>
      <td>商品A</td>
      <td data-price="500">500円</td>
      <td><input type="number" class="qty" value="1" min="0" max="99"></td>
      <td class="subtotal">500</td>
    </tr>
    <tr>
      <td>商品B</td>
      <td data-price="1200">1,200円</td>
      <td><input type="number" class="qty" value="1" min="0" max="99"></td>
      <td class="subtotal">1,200</td>
    </tr>
  </tbody>
  <tfoot><tr><td colspan="3">合計</td><td id="total">1,700</td></tr></tfoot>
</table>

const cart = document.getElementById("cart");

cart.addEventListener("input", () => {
  let total = 0;

  cart.querySelectorAll("tbody tr").forEach(row => {
    const price = Number(row.querySelector("[data-price]").dataset.price);
    const qty = parseInt(row.querySelector(".qty").value) || 0;
    const subtotal = price * qty;

    row.querySelector(".subtotal").textContent = subtotal.toLocaleString();
    total += subtotal;
  });

  document.getElementById("total").textContent = total.toLocaleString();
});

<label>
  割引率: <input type="range" id="discount" min="0" max="50" value="10">
  <span id="discountValue">10</span>%
</label>
<p>定価 10,000円 → 割引後: <span id="discountedPrice">9,000</span>円</p>

const slider = document.getElementById("discount");
const display = document.getElementById("discountValue");
const priceEl = document.getElementById("discountedPrice");
const basePrice = 10000;

slider.addEventListener("input", () => {
  const rate = parseInt(slider.value);
  display.textContent = rate;
  const discounted = Math.round(basePrice * (1 - rate / 100));
  priceEl.textContent = discounted.toLocaleString();
});

function getValidNumber(input, min = 0, max = Infinity) {
  const value = parseFloat(input.value);

  if (isNaN(value)) {
    input.classList.add("is-invalid");
    return null;
  }
  if (value < min || value > max) {
    input.classList.add("is-invalid");
    return null;
  }

  input.classList.remove("is-invalid");
  return value;
}

.is-invalid {
  border-color: #ef4444;
  background-color: #fef2f2;
}