search
LoginSignup
3

More than 1 year has passed since last update.

posted at

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

はじめに

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

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>

その他

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

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
What you can do with signing up
3