Q&A
##疑問点
rails6でのjavascriptファイルの読み込み順についてわからないところがあるため教えていただきたいです。
##現状
以下のコードでDOM要素を取得したいのですが、うまく取得できないという事象が起きています。(conslole.logでみてみたところnillが返っている。)
javascript
1const flashMsg = document.querySelector('.flash-message')
調べていたところ先にJavascriptファイルが読み込まれると要素の取得ができず
nillが返ってきてしまうことがわかりました。
対処法としてbodyタグの最後にJavascriptを読み込む記述をする必要があるとのことですがapplication.html.erbではjsファイルの読み込みコードがheadタグ内に書かれてしまっているため、javascriptが先に読み込まれてしまうのでは？と疑問に感じています。
application.html.erb
<!DOCTYPE html> <html> <head> <title>Sample</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> //ここでbodyタグの読み込みより先にJavascriptが読み込まれてしまうのでは？ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html>
個別でJavascriptを読み込む場合は対象のファイル(.erbファイル)の最後に<%= javascript_pack_tag 'ファイル名' %>を記述すればいいとは思うのですが共通ファイルでDOM要素を取得する場合にはどのようにすれば良いのでしょうか？
うまく説明ができず申し訳ありませんが、わかる方いましたら教えていただきたいです。
よろしくお願いいたします。
##開発環境
- Rails 6.0.3.3
- ruby 2.6.5
回答1件
0
ベストアンサー
ぱっと思いつく方法では
= javascript_pack_tag 'application',defer:true
や
window.onload = function() { const flashMsg = document.querySelector('.flash-message'); };
ですかね。
前者は動作確認していないので、後者がおすすめです。
如何でしょうか？
投稿2020/11/20 14:55
編集2020/11/20 19:17
総合スコア563
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/11/21 00:16
2020/11/21 17:02