Go to Qiita Advent Calendar 2024 Top
LoginSignup
sorane
@sorane

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

WordpressでJavaScriptにエラーが出る

Q&A

Closed

JavaScriptWordPress

解決したいこと

WordpressでJavaScriptにエラーが出る

WPでHPを制作しています。JSはまだ学んでいないのですが、レスポンシブ対応のヘッダーを作りたかったため、サイトをまわってコピペでできるプログラムを探し、コピペをし、HTMLだと動いたのですが、WPに実装してみると、エラーが出てきてしまいます。初歩的な問題なのでしょうが、、、解決法を教えてください。

発生している問題・エラー

master.js:2 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at master.js:2

該当するソースコード

const responsive_menu_btn = document.querySelector('.responsive_btn');
responsive_menu_btn.addEventListener('click', menuToggle);

function menuToggle() {
  const header_menu_detail = document.querySelector('.header_nav');
  header_menu_detail.classList.toggle('menu_active');
}

自分で試したこと

JSファイルをスクリプトタグのなかに入れたり、functions.phpを編集して追加したりしました。
また、　こちらのWebサイトを参考にHTMLで制作した時はきれいに作ることができました。
https://logss.net/responsive-header-html/

お手柔らかにおねがいします。

0

2Answer

prismrism
@prismrism

原因としては既出の通り addEventListener の対象となるDOMが読み込まれていないからだと思いますが、HTMLで直接書いたものと Wordpress で作成したものとで結果が異なったのはそれぞれで <script> タグの位置が違うからだと推察されます。

投稿文記載のURLより引用
  </header>
  <script src="js/master.js"></script>
</body>

</html>

HTMLは（とても大雑把に言うと）先頭行から順に処理していくので、操作しようとしている DOM が <script> タグの前後どちらに記述されているかの影響を受けます。
参考にしたという記事にあるHTMLでは <script> タグを末尾の方に書いていますが、例えば Wordpress の wp_enqueue_scripts はデフォルトでは <head> タグ内に……つまり先頭の方に <script> が配置されてしまうので、ページ内のボタン等との前後関係が異なります。

前者なら JavaScript 実行時すでに <div class="responsive_btn"> が存在しているので動作しますが、後者では <body> タグすら存在しないので document.querySelector を行っても DOM を見つけることができない（変数 responsive_menu_btn に null が入るので Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') ）、ということになります。

そういうわけで <script> タグの位置によって処理が動いたり動かなかったり、といったことが無いように JavaScript を実行する場合には「とりあえず load や DOMContentLoaded を使ってロード待ちをしておくとよい」という対策が取られます。

2Like

Comments

  1. @sorane

    Questioner

    回答ありがとうございます。
    HTMLとWordpressで処理に差がでることが理解できましたが、JavaScriptの知識が全くなく、loadやDOMContentLoadedをWebサイトで調べても使う方法がわかりません。
    どうやって書けばいいのかお教えいたきたいです。よろしくおねがいします。

  3. @sorane

    Questioner

    無事このエラーは消えたのですが、net::ERR_ABORTED 404　というエラーがでてしまいます。

  4. @prismrism

    404 ということは何かしらのファイルを読み込むときのURLが間違っています。開発ツールを見ているのであればどのURLのことか近くに書いてるはずなので確認してみてください。

    ただ「さっきまで master.js でエラーが出ていて、コメントのとおりに修正したらエラーが消えた」ということであれば master.js はちゃんと読み込めているはずです。
    404 は本件とは無関係じゃないかなと思います。

  5. @sorane

    Questioner

    なるほど！ご丁寧にありがとうございます。
    こことは違う質問を投げてみようと思います。
    ありがとうございました。
bizzpaper
@bizzpaper

.addEventListener('click', menuToggle, false)ではないでしょうか？

addEventListenerには引数が3つ必要だと思います。

1Like

Comments

  2. @bizzpaper

    htmlはどうなっていますか？
    classが間違っている可能性があります。

  4. @sorane

    Questioner

    ありがとうございます。
    無事、エラーが消えました。ですが、net::ERR_ABORTED 404　このエラーが出てしまって、動きません。

Your answer might help someone💌

LoginSign Up