18
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】getElementByIdでnullが返ってきたときに確認すること

Posted at

#はじめに#
凡ミスで長い時間つまずいたのでメモ。
あと役に立ちそうなサイトもメモ。

#jsのコードの場所を確認#
外部ファイルを読み込むにしろ, htmlの中に書くにしろ, どこに書くかは割と重要ですね。
外部ファイルでつまずいたのでそちらの事例を書きます。

<script src="menu.js"></script>
<div id="menu"></div>

var menu = document.getElementById('menu');

この例だと変数menunullになってしまいます。
理由は簡単ですが, <div id="menu"></div>の前にjsファイルを読み込んでいるので, menuというid属性なんて知らないわよ! どこにあるの!ってなってしまいます。
ってわけなので, 順番を入れ替えてあげればなおります。

<div id="menu"></div>
<script src="menu.js"></script>

#その他#
他の事例はこちらのサイトが参考になるかも

18
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?