モーダル機能実装時、Uncaught TypeErrorがconsoleで出ることで苦しんでます

前提・実現したいこと

モーダル機能の実装途中に出たエラーです。
Google Chromeの検証ツールのconsoleで下記のエラーが出ています。

発生している問題・エラーメッセージ

console
1modal.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null
2    at Object../app/javascript/packs/modal.js (modal.js:1)
3    at __webpack_require__ (bootstrap:19)
4    at Object../app/javascript/packs/application.js (application.js:10)
5    at __webpack_require__ (bootstrap:19)
6    at bootstrap:83
7    at bootstrap:83

該当のソースコード

modalhtmlerb
1<main>
2
3  <h1>お問い合わせ</h1>
4  <a id="modalOpen" class= "modalOpen">問合せ</a>
5  
6  <div class="modal" id="modal">
7    <h2>お問い合わせ</h2>
8    <div class="modalContents">
9      fadfaafdajknknkjkada<br>
10      dfgandfsksakfdnvkajn<br>
11      fadfaafdajknknkjkada<br>
12      dfgandfsksakfdnvkajn<br>
13    </div>
14    <a id="modalClose" class= "modalClose">閉じる</a>
15  </div>
16  
17  <div class="mask" id="mask"></div>
18
19</main>
20

modalscss
1main {
2  background-color: rgb(219, 215, 215);
3  padding: 20px;
4  border-radius: 5px;
5  max-width: 1000px;
6  margin: 50px auto;
7  height: 200vh;
8}
9
10h1 {
11  font-size: 30px;
12  font-weight: bold;
13  margin-bottom: 30px;
14}
15
16.modalOpen, .modalClose {
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  width: 200px;
21  height: 40px;
22  background-color: blue;
23  color: white;
24  font-size: 16px;
25  border-radius: 5px;
26  text-decoration: none;
27  cursor: pointer;
28}
29
30.modalClose {
31  margin: 30px auto 0;
32}
33
34.modal {
35  position: fixed;
36  top: 50%;
37  left: 50%;
38  transform: translate(-50%,-50%);
39  background-color: rgb(245, 243, 243);
40  padding: 20px;
41  border-radius:5px;
42  min-width: 500px;
43  z-index: 2;
44  opacity:0;
45  visibility: hidden;
46}
47
48.modal h2 {
49  font-weight: bold;
50  font-size: 20px;
51  margin-bottom: 10px;
52}
53
54.modalContents {
55  line-height: 1.8;
56}
57
58.mask {
59  position: fixed;
60  top: 0;
61  left: 0;
62  width: 100%;
63  height: 100%;
64  background-color: rgb(5, 3, 3);
65  opacity: 0.8;
66  z-index: 1;
67  opacity: 0;
68  visibility: hidden;
69}

modaljs
1document.getElementById("modalOpen").addEventListener("click",function(){
2  document.getElementById("modal").classList.add("active");
3  document.getElementById("mask").classList.add("active");
4})

applicationjs
1// This file is automatically compiled by Webpack, along with any other files
2// present in this directory. You're encouraged to place your actual application logic in
3// a relevant structure within app/javascript and only use these pack files to reference
4// that code so it'll be compiled.
5
6require("@rails/ujs").start()
7// require("turbolinks").start()
8require("@rails/activestorage").start()
9require("channels")
10require('./modal')
11require('./preview')
12
13
14
15// Uncomment to copy all static images under ../images to the output folder and reference
16// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
17// or the `imagePath` JavaScript helper below.
18//
19// const images = require.context('../images', true)
20// const imagePath = (name) => images(name, true)
21
22

試したこと

エラー文からapplication.jsでのmodal.jsの記述の仕方が悪いんじゃないかと思ってます。

ですがモーダル機能実装前に画像のプレビュー機能を実装した時にはrequire('./preview')の
記述で行えたのでどれが正しいのかわかりません。
色々と記事をみましたが<script>タグを使うなどで書かれていたりしてやり方がバラバラなのでできれば統一したいです。

初歩的な質問ですがよろしくおねがいします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

自己解決

再度調べ直したところ原因はjavascriptファイルが読み込む前にhtmlファイルが読み込めていないから起きたと判明しました。
なので</body>の直前に<%= javascript_pack_tag 'application'%>を読み込ませることでエラー解決することができました。
回答ありがとうございました。

#before
applicaton.html.erb

ruby
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>OldFashion</title>
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
9    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
10    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_pack_tag 'application'%>
12  </head>
13
14  <body>
15    <%= yield %>
16  </body>
17</html>
18

#after

ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>OldFashion</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
8    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10  </head>
11
12  <body>
13    <%= yield %>
14  <%= javascript_pack_tag 'application'%>
15  </body>
16</html>
17