JavaScript
計算結果が NaN になる
文字列を数値に変換していない
こんな症状
エラーは出ないのに、計算結果が NaN（Not a Number）と表示される。文字列と数値の計算で起きやすいよ。
まず試す
計算前に Number(値) や parseInt(値) で数値に変換する。input.value は常に文字列。
js
const price = Number(input.value); // 文字列を数値に
const total = price * 2;これで直らなければ、下の「自分のケース」を確認。
🔍 自分のケースはどれ？
- ✓input.value をそのまま計算した
→ Number(input.value) で数値に変換してから計算する。 - ✓100円 のような単位付き文字列
→ parseInt("100円") は 100 を取り出せる（数字以外は無視される）。 - ✓型が分からない
→ console.log(typeof 変数) で確認する。isNaN(値) で NaN 判定もできる。
なぜ起きる？
数値のつもりの変数が実は文字列になっているよ。JavaScriptではinput.valueで取得した値は常に文字列型だから、そのまま計算すると文字列結合になったりNaNになったりするんだ。"100円" * 2 のように数値に変換できない文字列を計算するとNaNになるよ。
✕ エラーが起きるコード
const price = "100円";
const total = price * 2;
// NaN になる✓ 直したコード
const price = parseInt("100円");
const total = price * 2; // 200✅ 直ったか確認
計算結果が NaN でなく期待した数値になればOK。
この解決法は役立ちましたか？
🔗 関連するエラー
- Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ
- Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') — 取得しようとしたHTML要素が見つかっていない
- 404 Not Found（スクリプトが読み込まれない） — script の src パスが間違っている
- TypeError: xxx is not a function — 関数でないものを呼び出している
- console.log を書いたのに何も表示されない — 開発者ツールを開いていない
📖 この問題を学べるレッスン
✏️ 手を動かして練習
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
- JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説