Rails7でJavaScriptのクリックイベントを実装

Question

実現したいこと

Rails7のフロントエンドから、JavaScirptでボタンクリックイベントを実装したいのですが、エラーとなってしまいます。

前提

こちらの記事を参考に、
Rails7とJavaScriptを連携しました。
記事と同じように、top/indexで、JavaScriptを呼び出しています。

該当のソースコード

\app\javascript\top\index.jsで、ボタンのクリック時に呼び出したい関数を定義しました。

console.log("testA");
function OnSubmitClick(){
    console.log("submit");
}

app\views\top\index.html.erbで、ボタンのクリック処理で上記の関数を指定しているのですが、

<button type="button" onclick="OnSubmitClick();" name="name" value="値">送信</button>

エラーとなってしまいます。

(index):42 Uncaught ReferenceError: OnSubmitClick is not defined
    at HTMLButtonElement.onclick ((index):42:74)

試したこと

JavaScriptの「testA」のログは取れているので、JavaScript自体は効いているようです。
クリック処理を効かせるにはどのようにすればよいですか？

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

Ruby on Rails7
Google Chrome

Answer 1

そもそもの javascript の仕様として、モジュールで定義した関数をグローバルスコープから利用することはできません。
（ 参考: JavaScript モジュール | MDN ）

なので、HTML側に onclick を書くのではなく、 js側でイベントリスナを登録する形にすれば良いと思います。

-  <button type="button" onclick="OnSubmitClick();" name="name" value="値">送信</button>
+  <button type="button" id="hogeButton" name="name" value="値">送信</button>

   console.log("testA");
   function OnSubmitClick(){
     console.log("submit");
   }
+  document.getElementById('hogeButton').addEventListener('click', e => {
+    OnSubmitClick();
+  });

Comments

[tkshp]

ご回答ありがとうございます。
クリック処理が効きました。