質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.69%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

217閲覧

JavaScript document.getElementById(...) is null

tyeqsf

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/05/23 23:26

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

Firefox

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

int32_t

2023/05/23 23:32

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

回答1

2

ベストアンサー

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

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;

--

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

イメージ説明

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

イメージ説明

↓ ↓ ↓ ↓ ↓

イメージ説明

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

イメージ説明

↓ ↓ ↓ ↓ ↓

イメージ説明

--

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

投稿2023/05/24 00:09

編集2023/05/25 23:45
shinoharat

総合スコア1592

tyeqsf👍を押しています
tyeqsf❤️を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

tyeqsf

2023/05/25 01:39 編集

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

2023/05/25 01:38

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

2023/05/25 02:39

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。