プレビュー機能を実装したい。

Question

#前提・実現したいこと
javascriptで画像のプレビューを行なっているのですが、
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')at HTMLDocument.<anonymous> (preview.js:3)
とエラーが出てしまいます。解決策をご教授いただけると幸いです。
#該当のソースコード

  document.addEventListener('DOMContentLoaded', function(){
  const ImageList = document.getElementById('image-list');
  document.getElementById('cat-image').addEventListener('change', function(e){
    console.log(123);
  });
});

 <%= form_with model: @cat, url: posts_path, local: true do |f| %>
   <%= render 'shared/error_messages', model: f.object %>
   <div class="img-upload">
      <div class="weight-bold-text">
        ねこ画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックして画像をアップロード
        </p>
        <%= f.file_field :images, id:"cat-image" %>
      </div>
    </div>
    <div class="offer-btn-contents">
      <%= f.submit "募集する" ,class:"offer-btn" %>
      <%=link_to 'もどる', root_path, class:"back-btn" %>
    </div>
    <div id= "image-list"></div>
  <% end %>

#試したこと
idの見直しなどをした。

#補足情報（FW/ツールのバージョンなど）
上記のhtmlはrails内のapp/views/posts/new.html.erbにあります。

Comments

[maisumakun]

Turbolinksは入れていますか？

[pengin-fes2]

返信ありがとうございます。
いれています。