FROM CACHE - jp_header

Topページボタンの実装が新規テンプレートでエラーになる(Cannot read properties of null )

mnfdann1
Shopify Partner
14 0 1

TOPページのスクロールするとボタンが出現するJavaScriptのコードを記述し、エラーもなく問題なく動くのですが、テンプレート追加したページでは、"Cannot read properties of null (reading 'style')"とエラーが出てしまいます。

 

 

以下が記述したコードです。

window.addEventListener("scroll", function () {
const topBtn = document.getElementById("topbutton");
const scroll = window.pageYOffset;
if (scroll > 300) {
topBtn.style.opacity = 1;
} else topBtn.style.opacity = 0;
});
 
JSの知識が浅く、よくわからないので教えていただきたいです。
 
 
1件の返信1
Jizo_Inagaki
Shopify Partner
885 339 668

ボタンとJSが設置されている状況がよくわからないのですが、以下のような状況ということですか?

  • ボタンはTOPページにのみ設置
  • JSは全ページに設置

 

上記前提であれば、エラーが出力されたページにボタンがないからではと思います。

JS側で要素の有無を判定したり、liquidでページを判定してJSをだし分ければ良いかなと思います。

 

[参考]

https://shopify.dev/docs/themes/architecture/templates

https://shopify.dev/docs/api/liquid/objects/template

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。