特定のページのみJavaScriptでアラートを表示したいです

Question

前提・実現したいこと

現在Ruby on Railsを用いてアプリの開発をしています。その中で特定のページでのみページ離脱防止のためにJavaScriptでアラートを表示したいです。その特定のページは入力フォームでsubmitでデータを送信する時にはアラートは表示したくないです。

発生している問題・エラーメッセージ

ウィンドウの検証で確認してみたところ下記のエラーが発生していました

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at Object.<anonymous> (splash.js:27)
    at Object../app/javascript/splash.js (splash.js:30)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:11)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
(anonymous) @ splash.js:27
./app/javascript/splash.js @ splash.js:30
__webpack_require__ @ bootstrap:19
./app/javascript/packs/application.js @ application.js:11
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

現状、全てのページでアラートが表示されてしまいます。またsubmitでデータを送信する時にもアラートが表示されてしまいます。

該当のソースコード

var onBeforeunloadHandler = function(e) {
    e.returnValue = 'ちょっと待ってくださいよ。まだダメですよ。';
};
// イベントを登録
window.addEventListener('beforeunload', onBeforeunloadHandler, false);

form.addEventListener('submit', function(e) {
    // イベントを削除
    window.removeEventListener('beforeunload', onBeforeunloadHandler, false);
}, false);

試したこと

あるサイトを参考に実装を進めてきましたがソースの内容を理解できなかったので解決が困難な状態です。
解決方法、ソースの内容を教えていただけると幸いです。よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 6.0

Comments

[maisumakun]

「あるサイト」とは、どこのサイトでしょうか？

[Lhankor_Mhy]

ご提示のコードを試してみましたが、「submitでデータを送信する時にもアラートが表示されてしまいます」という問題が再現しませんでした。

ご提示いただいていない部分に原因があると思われます。
（たとえば、form を定義していないとか）

[sumimasa]

確認してみます

Answer 1

Cannot read properties of null は「null のプロパティを読むことはできません」というようなエラーです。
つまり、formにはnullが入っているということです。

推測ですが、このスクリプトを</body>の直前に書く、または</body>の直前にscriptタグを置いて読み込ませると上手く動作するような気がします。

Comments

[sumimasa]

できました！
ありがとうございました！

[Lhankor_Mhy]

お役に立てたようで何よりです。

これで動作する理由は、以下をご参照ください。

https://codeaid.jp/js-load/#:~:text=head%E3%82%BF%E3%82%AF%E3%82%99%E5%86%85%E3%81%ABjavascript%E3%82%92%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%E3%81%A8%E3%81%BE%E3%81%9F%E3%82%99body%E3%82%BF%E3%82%AF%E3%82%99%E5%86%85%E3%81%AE%E5%87%A6%E7%90%86%E3%81%8B%E3%82%99%E8%A1%8C%E3%82%8F%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A6%E3%82%99%E3%80%81element%E3%82%AA%E3%83%95%E3%82%99%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8B%E3%82%99%E5%87%A6%E7%90%86%E3%81%A6%E3%82%99%E3%81%8D%E3%81%99%E3%82%99%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%A8%E3%81%AA%E3%82%8B%E3%81%9F%E3%82%81%E3%81%A6%E3%82%99%E3%81%99