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

mnfdann1 · ‎10-16-2023

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の知識が浅く、よくわからないので教えていただきたいです。

Jizo_Inagaki · ‎10-21-2023

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

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

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

[参考]

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

コミュニティ・ブログ記事