【エラー解決】'addEventListener' of null

Question

画像の表示で、モーダルウインドウの実装をしようとドットインストールを参考に、Javascriptを書いていたのですが、
Uncaught TypeError:
Cannot read property 'addEventListener' of null
のエラーが突破できません。

・modal_openがnull
・htmlの記述で modal_openねがid指定できていない
・Hamlの記法が間違っているのでしょか？

よくあるエラーとのことですが手助けお願いできないでしょうか。

リンク内容

【コード】

index.html.haml

.container
  .media-thumbnails
    - @posts.each do |post|
      #modal_open.content_post{style: "background-image: url(#{post.image});"}
      #mask.aaa
      #modal_content.aaa{style: "background-image: url(#{post.image});"}
      #close
  = paginate(@posts)

modal.js

'use strict';

{
  const modal_open = document.getElementById('modal_open');
  const mask = document.getElementById('mask');
  const modal_content = document.getElementById('modal_content');

  modal_open.addEventListener('click', () => {
    mask.classList.remove('aaa');
    modal_content.classList.remove('aaa');
  });
}

Comments

[kei344]

teratailでは画像もアップできますので、ご自信で所持されている画像であればそちらを使用されてはいかがでしょうか。（画像として質問文に表示されますし）

[maisumakun]

JavaScriptはどこでどのような形で挿入していますか？

[m.ts10806]

console.log()　でイベント付与しようとしている要素、変数の状態を確かめてみてください。
なんとなくですけど、HTML描画前にjs実行しようとしているような気がします

[okaday]

JavascriptよHTMLの読み込み順序のエラーだとは把握できました。
それはどこの記述を確認すればよろしいでしょうか？
初歩質問申し訳ございません。

[okaday]

$(function(){
//
});

を追記で解決致しました！
ありがとうございます。

Answer 1

$(function(){
//なにかしらの処理
});