javascriptがrailsで動かないとき

拾ってきたコードが動かない

こちらの記事を参考に、回答によって質問が変わるプログラムを作ろうとした。

記事ではHTML・CSS・Javascriptの構成であった。

新規railsアプリを作成し、転記してみるも・・・動かない。

エラー内容

エラー文は以下の通り。

OnYesClick() is not defined

エラー内容を細かく解読すると、以下のようになる。

<a href="javascript:OnYesClick();" id="btn_yes">Yes</a>

#htmlの記述に基づいてjavascriptを実行しようとしたが、
対象の「OnYesClick()」が定義されていない。

エラーの原因

Railsではjavascriptを実行する際に「Webpacker」を経由している。

Spocketsであれば問題ないのだが、WebpackerではHTMLからJavascriptの呼び出しができない。

対処法

HTMLからの呼び出しができないため、Javascriptの記述を追加してあげよう。

#追加したjsファイル

function OnYesClick() {
  RewriteSrc(yesArray[n])
}
const yesbutton = document.getElementById("btn_yes")
yesbutton.addEventListener("click",() => {OnYesClick()})
 
function OnNoClick() {
  RewriteSrc(noArray[n])
}
  
const nobutton = document.getElementById("btn_no")
nobutton.addEventListener("click",() => {OnNoClick()})

#シンプルに変更したHTML
<div id="btn_yes">Yes</div>
<div id="btn_no">No</div>