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

日本語 ディスカッション 技術的なQ＆A
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の知識が浅く、よくわからないので教えていただきたいです。

2

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

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

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

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

[参考]

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

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