[Q&A] javascriptが他のページでも読み込まれてしまう

javascriptが他のページでも読み込まれてしまう

解決したいこと

最近プログラミングを始めた初学者です。
現在オリジナルのアプリを作成しています。
rails、javascriptを使いクリックした際にプルダウンメニューが表示され、メニューを選択すると特定のページに遷移する機能を実装したのですが、遷移先にプルダウンメニューが残ってしまいます。
また、それと関係があるかは不明なのですが、画面を更新しないとjavascriptが読み込まれないのですがこちらもご教授して頂けると幸いです。

https://gyazo.com/8bba3b4d25baedef7ef827a09305eeaf

発生している問題・エラー

javascriptが他のページでも読み込まれてしまう。

該当するソースコード

document.addEventListener("turbolinks:load", function() {
function pullDown() {

  const pullDownButton = document.getElementById('lists')
  const pullDownLists = document.getElementById('pull-down')

  pullDownButton.addEventListener('mouseover', function(){
    pullDownButton.setAttribute("style", "border: solid")
  })

  pullDownButton.addEventListener('mouseout', function(){
    pullDownButton.removeAttribute("style", "border-style:none;")
  })

  pullDownButton.addEventListener('click', function(){
    if (pullDownLists.getAttribute("style") == "display:block;") {
      // pullDownParentsにdisplay:block;が付与されている場合（つまり表示されている時）実行される
      pullDownLists.removeAttribute("style", "display:block;")
    } else {
      // pullDownParentsにdisplay:block;が付与されていない場合（つまり非表示の時）実行される
      pullDownLists.setAttribute("style", "display:block;")
    }
  })
}
window.addEventListener('load', pullDown)
})

自分で試したこと

こちらの記事を参考にturbolinks:loadを追記してみましたが変化はありませんでした。
かなり初歩的な部分ではありますが、ご教授して頂けたらと思います。
https://qiita.com/shibata0406/items/861df68467f3bee22a94

1Answer

@blue32a posted at 2020-09-30

HTMLなどの情報も無いとなんとも言えないですね・・・。
Javascript関係なくプルダウンメニューが表示される状態、という可能性もあります。

Google Chromeを利用されているのであれば、デベロッパーツールを利用して確認するのが良いと思います。

条件分岐などを利用して必要なjsファイルだけ読み込まれるようになっていますか？
デベロッパーツールのElementsで<script>タグの確認、またはNetworkでjsファイルが読み込まれているか確認できます。

またSourcesからjavascriptのデバックをすることが出来ます。
ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）

画面を更新しないとjavascriptが読み込まれない

window.addEventListener('load', pullDown)

この部分が実行されない、という意味でしょうか？
Window: loadイベントはページ全体（スタイルシートや画像含む全て）が読み込まれた時に発生するので、何か読み込みが終わっていないためにイベントが発生せず、pullDownが実行されない可能性があります。