JavaScript document.getElementById(...) is null

コンソールのエラーの表記がdocument.getElementById(...)となっており...の部分がわからないので特定できない場合どうやって特定するのでしょうか？

Firefox

int32_t

2023/05/23 23:32

エラーが出た行も表示されていませんか?

行動規範の内容に同意します

回答1件

ベストアンサー

説明のため以下のコードを使います。
ページを開くと ★ の位置でエラーが発生します。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>サンプル</title>
6</head>
7<body>
8  <div id="x">div#x</div>
9  <!-- id="y" は無いよ -->
10  <div id="z">div#z</div>
11  <script src="index.js"></script>
12</body>
13</html>

js
1// 実際は全部1行になっているものとする。
2var id;
3
4id = 'x';
5document.getElementById(id).innerHTML;
6
7id = 'y';
8document.getElementById(id).innerHTML; // ★エラー！
9
10id = 'z';
11document.getElementById(id).innerHTML;

１・エラーメッセージの横にあるリンクから該当のソースコードへジャンプします。

２・ {} みたいなボタンを押して見やすくします

↓　↓　↓　↓　↓

３・監視式に変数名を入れれば、変数の中身も確認できます。

↓　↓　↓　↓　↓

これで、「2番目の document.getElementById(id).innerHTML; でエラーが発生していて、そのとき変数 id には y が入っている」ということが調べられると思います。

投稿2023/05/24 00:09

編集2023/05/25 23:45

shinoharat

総合スコア1685

tyeqsf

2023/05/25 01:39 編集

言葉たらずですみません。参照する方法はわかるのですが ...となってる部分を表示してログに出す設定か何かはあるんですか？１行に複数document.getElementByIdの記述があった場合、どれを指すかわからないと思います

tyeqsf

2023/05/25 01:38

なぜあえて ... と表記してるのか、理由があるんでしょうか？

shinoharat

2023/05/25 02:39

コメントありがとうございます。 > １行に複数document.getElementByIdの記述があった場合、どれを指すかわからないと思いますスクリプトが圧縮(minify)されている感じですかね？開発者ツールに整形ボタンがあるので、それを使ってみてはいかがでしょうか？回答を編集しました。 > ...となってる部分を表示してログに出す設定か何かはあるんですか？すみません。分かりません。 > なぜあえて ... と表記してるのか、理由があるんでしょうか？すみません。こっちも分かりません。整形ボタンで解決してくれれば良いですが・・・。

行動規範の内容に同意します