JavaScript
🔢 計算結果が NaN になる
文字列を数値に変換していない
😰 こんな症状
エラーは出ないのに、計算結果が NaN（Not a Number）と表示される。文字列と数値の計算で起きやすいよ。
🔍 原因
数値のつもりの変数が実は文字列になっているよ。JavaScriptではinput.valueで取得した値は常に文字列型だから、そのまま計算すると文字列結合になったりNaNになったりするんだ。"100円" * 2 のように数値に変換できない文字列を計算するとNaNになるよ。
❌ エラーが起きるコード
const price = "100円";
const total = price * 2;
// NaN になる✅ 直し方
1. Number(値)やparseInt(値)で数値に変換してから計算する。 2. console.log(typeof 変数名)で型を確認する。 3. input.valueは常に文字列なのでNumber(input.value)で変換する。 4. isNaN(値)でNaNかどうかチェックできる。
✅ 修正後のコード
const price = parseInt("100円");
const total = price * 2; // 200この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- ボタンを押しても何も起きない — getElementById の id 不一致
- TypeError: xxx is not a function — 関数でないものを呼び出している
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説