(Ruby on Rails) jsファイルが起動しなくなる
解決したいこと
現在、ポートフォリオを作成中の初学者です。
トップページに２つのjsファイルが作動するように実装しています。
画面をリロードすると正常に２つのjsファイルが作動するのですが、別ページに移動した後"link_to"で設定しているルートパスでトップページに戻ってくるとjsファイルが動作しなくなってしまいます。
再度画面をリロードすると正常に動き出します。原因がいまいちピンとこず、困ってしまっています。
原因がわかる方や対処法がわかる方がいらっしゃいましたら教えていただけますと幸いです。
(質問がわかりずらくて申し訳ありません、、）
該当するソースコード
トップ画面に設置している２つのjsファイル
app>javascript>modal_window.js
$(function() {
$("#modal-open").on('click',function(){
$("#modal-overlay").fadeIn("fast");
});
$("#modal-close").on('click',function(){
$("#modal-overlay").fadeOut("fast");
});
});
app>javascript>alcohol_amount.js
window.addEventListener('load', function(){
const expectpercentageInput = document.getElementById("expect-percentage")
expectpercentageInput.addEventListener("input",() =>{
const inputValue = expectpercentageInput.value;
const addAmountDom = document.getElementById("add-collect-amount");
const Amount = 100/expectpercentageInput.value*20;
addAmountDom.innerHTML = Math.floor(Amount).toLocaleString();
})
})
原因になりそうなlink_toが貼ってあるhtml
app>views>shared>main_header.html.erb
<header class='main-header'>
<div class='main-logo'>
<%= link_to image_tag("logo_transparent.png", class:"logo-img"), "/" %>
</div>
<div class='user-select'>
<ul class='lists-right'>
<li><%= link_to 'マイページ', "#", class: "select-content" %></li>
<li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: "logout" %></li>
</div>
</header>
画面リロード時（初期状態)では、トップ画面に設置してある二つのjsファイルは問題なく動作していますが、例えばですが、"main_header.html.erb"の" link_to image_tag("logo_transparent.png", class:"logo-img"), "/" "をクリックしトップ画面をもう一度表示させようとすると2つのjsファイルが動作しなくなります。
自分で試したこと
link_toの遷移先を"/"からroot_pathに変更してみたりしましたが、うまく言いませんでした。
0