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

はじめに

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

jsのコードの場所を確認

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

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

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

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

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

その他

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