[Rails6 / Javascript] DOM要素が取得できない(nillが返ってくる)
疑問点
rails6でのjavascriptファイルの読み込み順についてわからないところがあるため教えていただきたいです。
現状
以下のコードでDOM要素を取得したいのですが、うまく取得できないという事象が起きています。(conslole.logでみてみたところnillが返っている。)
const 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要素を取得する場合にはどのようにすれば良いのでしょうか？
うまく説明ができず申し訳ありませんが、わかる方いましたら教えていただきたいです。
よろしくお願いいたします。
0
