今回はjsの「canvas Cannot read property ‘getContext’ of null」というエラーの対処法を紹介します。canvasを使う時に出るエラーですね。
エラーの原因
原因は<script>を読み込んだ時点では<body>以下の要素が読み込まれていないためです。
<head>内でスクリプトを読み込んだ時点ではまだ要素が生成されていないため、「Cannot read property」と言われてしまうわけですね。
エラーの対処法
対処法は2つあります。
- jsを
</body>の直前で読み込む（終了タグの直前で読み込む） - jsファイルを
document.addEventListener('DOMContentLoaded', function() {~});で囲み、DOMが生成されてからjsが動作するようにする
2番目のやり方が個人的にいいと思います。
似たようなエラーを起こさないためにもjsは毎回DOMContentLoadedしてから読み込むようにするといいですね。
