WordPressで、jsファイルの内容が反映されない

Question

静的なサイトをWordPress化させることをしています。
そこで、自作のjsファイルの内容が反映されずに悩んでいます。

ちなみに、ディベロッパーツールで見てみると、
ファイル自体は正しく読み込まれているようです。

おそらく原因として考えているのが、ファイルの記述にエラーの表示があることです。
Uncaught TypeError: Cannot read properties of undefined (reading 'top')
という文がありました。

調べてみた結果、「top」の内容が見つからないという意味なのかなと思ったのですが、どこを改善したら良いかわからず質問させていただきました。

また、このような記述エラーがあるだけでWordPressにjsファイルの内容が反映されないことがあるのでしょうか。
もし何かご存知の方がおみえでしたら教えていただきたいです。

Comments

[penguin520]

似たようなエラーをいまやっています。
.offset()　が定義されていないので　.top　につながらないよというエラーだと思います。

[bglhk8447755]

ありがとうございます!!
静的サイトではエラーにならなかったのですが。。
原因を調べてみたいと思います。

Answer 1

おそらくドキュメントの読み込みが完了する前に取得しようとしていることが原因ではないでしょうか。
ドキュメントは上から実行されていくので、グローバルメニューがまだレンダリングされていない状態で位置を取得しようとするとグローバルメニュー自体が見つからず、そのプロパティは見つからないと言われます。

8行目・9行目をwindow.onload = function() {...}や$(document).ready(function() {...}の中に入れ込んで、HTMLドキュメントの読み込みが完了したときに実行する必要があるかと思います。
試してみてください。

解決できれば幸いです。

Comments

[penguin520]

参考にさせていただきました。助かりました、ありがとうございます。

[koji]

お役に立てて何よりです。mm

[bglhk8447755]

すみません、初歩的な質問で申し訳ないのですが
8行目・9行目の部分を以下のようにwindow.onload = function() {...}で囲う、ということで合っていますでしょうか。

window.onload = function() {
var navPos = jQuery('#global-nav').offset().top; // グローバルメニューの位置
var navHeight = jQuery('#global-nav').outerHeight(); // グローバルメニューの高さ
}

[bglhk8447755]

また重ね重ね質問して申し訳ないのですが、

静的サイトではエラーなくjsは動いていました。
今回初めて静的サイトからWordPress化させているのですが、
皆さん、WordPress化させる時は毎回このようにjsを編集されているのですか？

[koji]

window.onload = function() {...}で囲う方法についてそれで間違いありませんが、
すみません、訂正させてください。
8・9行目だけでなくjQuery(window).on('scroll' ...も含めた全てを一緒に囲ったほうがいいです。

window.onload = function() {
var navPos = jQuery('#global-nav').offset().top; // グローバルメニューの位置
var navHeight = jQuery('#global-nav').outerHeight(); // グローバルメニューの高さ
jQuery(window).on('scroll', function() {
if(jQuery(this).scrollTop() > navPos) {
jQuery('body').css('padding-top', navHeight);
jQuery('#global-nav').addClass('m_fixed');
jQuery('#scroll-nav').addClass('m_space');
} else {
jQuery('body').css('padding-top', 0);
jQuery('#global-nav').removeClass('m_fixed');
jQuery('#scroll-nav').removeClass('m_space');
}
});
}

流れを確認しておくと
ドキュメント読み込み完了→グローバルメニューの位置と高さ取得→ウィンドウスクロールのイベント追加
という流れになります。

静的サイトではエラーがなかったとのことですが、すみません、原因が分かりません。
こちらでやってみたところやはりエラーが出ました。（EdgeでもChromeでも）
通常はエラーが発生するほうが正しいと思います。
WordPressを使ってるかどうかに関係なく、このような手法を取ります。

[bglhk8447755]

ご丁寧な解説をありがとうございます。
先程実践してみたところ、エラーが解消されました！
本当にありがとうございます！

[koji]

お役に立てて良かったです。

Answer 2

同じようなエラーが出ていたのですが、こちらは解決しました。
ご質問のケースの場合　('#global-nav')　の部分で値を取得できていないことによるエラーでの可能性がかなり高いです。
⇨実際のページ

<div id="mw_wp_form_mw-wp-form-1222" class="mw_wp_form mw_wp_form_input  ">
					<form method="post" action="" enctype="multipart/form-data"><p>
<textarea name="name" cols="50" rows="1" >名前</textarea>
</p>
<p>
<input type="email" name="mail" size="60" value="メールアドレス" />
</p>
<p>
<input type="text" name="text" size="60" maxlength="2000" value="問い合わせ内容" />
</p>
<p>
<button type="submit" name="button" value="send" class="button">送信する</button>
</p>
<input type="hidden" id="mw_wp_form_token" name="mw_wp_form_token" value="a1166c7a6f" /><input type="hidden" name="_wp_http_referer" value="/contact/" /><input type="hidden" name="mw-wp-form-form-id" value="1222" /><input type="hidden" name="mw-wp-form-form-verify-token" value="431ae769fc8379f5e0b24b990bca066c9a055856" /></form>
				<!-- end .mw_wp_form --></div>



<input id="antibot" type="text" value="パスフレーズを入力" name="antibot"><br>
<p>BOT対策のため、パスフレーズを入力に　4649 と入力してください</p>
<div>

失敗したコード

<script>
var hoge = document.getElementById('antibot');
var xyz= hoge.getAttribute('value');
window.onload = function(){
  //1000ミリ秒（1秒）毎に関数を呼び出す
  setInterval(antibot, 1000);
}
function antibot(){
  if(xyz == "4649"){document.document.getElementsByClassName("button").style.cssText = 'display:inline-block !important';}
  else{document.getElementsByClassName("button").style.cssText = 'display:none !important';;}
}
</script>

成功したコード

<script>
var hoge;
var xyz;
var abc;
window.onload = function(){
  //1000ミリ秒（1秒）毎に関数を呼び出す
  setInterval(antibot, 1000);
}
function antibot(){
  hoge = document.getElementById('antibot');
  xyz = hoge.getAttribute('value');
  abc = document.getElementsByClassName("button");
  if(xyz == "4649"){abc[0].style.cssText = 'display:inline-block !important';}
  else{abc[0].style.cssText = 'display:none !important';;}
}
</script>

Comments

[penguin520]

全然別の問題で、このままだと、4649のパスフレーズを入力してもボタンが表示されないので、別で質問を立てます。

[koji]

別で立てられたご質問のほうも含めて解決されたようで良かったです。