Javascriptで記述したコードでエラーが出てしまう。

HTML

const content = document.querySelector(".content");


content.onclick = function() {
let p = document.createElement("p");
 p.innerHTML = "for Selecting your favorite anime, click below";
 content.appendChild(p);
}

Javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
      <title>ANIJAPA</title>
      <link href="css/anime.css" rel="stylesheet">
      <script src="javascript/anime.js" ></script>
      <link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
      <video src="movies/background_movie.mp4" id="background-video" autoplay loop></video>
    </head>
    <body>
      <div id="wrap">
        <div class="content">
          <h1>ANIJAPA</h1>
        </div>
      </div>
    </body>
</html>

上記のようなコードを書いているのですが、コンソールで以下のようにエラーが出てしまいます。

anime.js:4 Uncaught TypeError: Cannot set property 'onclick' of null
at anime.js:4

javascriptの記述は文法的に間違っているのでしょうか？
どなたかご教授いただければ幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

記述は間違っていません。
JavaScriptの読み込み場所が問題です。
anime.jsがhead要素で読み込まれ実行された時点では、body要素とその子孫はまだ取得できません。
そのため、document.querySelector()の結果は「該当要素なし」としてnullになります。

body要素の最後であれば、すべてのHTMLを読み込んだあとですので、取得して操作が可能です。

投稿2018/12/23 10:08