JavaScriptエラー Cannot read property 'addEventListener' of null
JavaScriptエラー Cannot read property 'addEventListener' of null
HTML文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Practice</title>
<link rel="stylesheet" href="style.css" charset="utf-8">
<script src="./main.js"></script>
</head>
<body>
<h1 id="title">タイトル</h1>
<img src="himawari.jpg" width="360"/>
<h2 class="sub-title">サブタイトル</h2>
<p>
コンテンツコンテンツコンテンツコンテンツ<br>
コンテンツコンテンツコンテンツコンテンツ<br>
コンテンツコンテンツコンテンツコンテンツ<br>
コンテンツコンテンツコンテンツコンテンツ<br>
</p>
<div class="blue">青青青青青</div>
<button id="Button">ボタン</button>
<button id="Button2">ボタン2</button>
<button id="Button3">クラス追加</button>
<button id="Button4">クラス削除</button></br>
<footer>
<a href="#" class="next">次へ</a>
</footer>
</body>
</html>
let btn = document.querySelector("button");
function a(){
console.log("helloworld");
}
btn.addEventListener("click",a);
これを実行したら、表題のようなエラーが出た。
Cannot read property 'addEventListener' of null
この理由は、JavaScriptは上から順番に読み込んでいくため、発生した。
どういうことかというと、
HTMLでJavaScriptを読み込むところというのは、
上から７行目の
<script src="./main.js"></script>
で読み込まれる。
しかし、その時点ではまだ値を受け取りたい
<button id="Button">ボタン</button>
ここまで読み込まれていないのが現状だ。
なので、「null」というエラーになる。
【解決策】
window.onload
というのを使う。
（※他にもイベントリスナで解決することもできる。）
書き方としては
window.onload = function(){処理内容};
となる。
この処理内容というのが、上記で
「行いたかったけど行えなかった処理」
だ。
なので、「処理内容」の中にはそのまま入れ込んで仕舞えばいい。
ただ、コードが読みにくくなるので、一度処理内容だけ関数で取り出したいので
関数cとして取り出してしまい、
function c (){
let btn = document.querySelector("button");
function a(){
console.log("helloworld");
};
btn.addEventListener("click",a);};
ーーーーーーーーーーーーーーーーーーーーーー（ここまでが取り出す作業）
window.onload = function(){
c();
};
ーーーーーーーーーーーーーーーーーーーーーーーーー（この中がエラーを解決するコード）
これによって、いったん全て読み込んでから、JavaScriptが適用されるということになり、
エラーにならずに進めることができる。
【まとめ】
HTMLにJavaScriptを読み込ませたい時は
読み込む順番を意識して置く必要があり、エラーに対処する必要があるようです。
