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

実現したいこと

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

diff:app\views\top\index.html.erb
1-  <button type="button" onclick="OnSubmitClick();" name="name" value="値">送信</button>
2+  <button type="button" id="hogeButton" name="name" value="値">送信</button>

diff:app\javascript\top\index.js
1   console.log("testA");
2   function OnSubmitClick(){
3     console.log("submit");
4   }
5+  document.getElementById('hogeButton').addEventListener('click', e => {
6+    OnSubmitClick();
7+  });