JavaScript 画像複数枚投稿でプレビューを表示させたい

Question

Jsの実装にて、出品昨日投稿ページで
画像選択した際に、選択した画像をプレビューで表示ができません。

Jsコード

if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
  document.addEventListener('DOMContentLoaded', function() {
    const ImageList = document.getElementById('item-box-img');

     // 選択した画像を表示する関数
     const createImageHTML = (blob) => {
      // 画像を表示するためのdiv要素を生成
     const imageElement = document.createElement('div')
     imageElement.setAttribute('class', "image-element")
     let imageElementNum = document.querySelectorAll('.image-element').length


     // 表示する画像を生成
     const blobImage = document.createElement('img')
     blobImage.setAttribute('src', blob)

    //  ファイル選択ボタンを生成
     const inputHTML = document.createElement('input')
     inputHTML.setAttribute('id', `item-image${imageElementNum}`)
     inputHTML.setAttribute('name', 'item[images][]')
     inputHTML.setAttribute('type', 'file')

     // 生成したHTMLの要素をブラウザに表示させる
     imageElement.appendChild(blobImage)
     imageElement.appendChild(inputHTML)
     ImageList.appendChild(imageElement)

     inputHTML.addEventListener('change', (e) => {
      file = e.target.files[0];
      blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
      
     })
    }

    document.getElementById('message_image_0').addEventListener('change', (e) => {
      let file = e.target.files[0];
      let blob = window.URL.createObjectURL(file);

      createImageHTML(blob)

    });
  });
}

出品機能HTML

<%= form_with(model: @item, 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, name: 'item[images][]', id:"item-image" %>
      </div>
      <div id= "item-box-img"> 
      </div>
    </div>
    <%# /出品画像 %>

ご教授よろしくお願いします。

Comments

[no1knows]

質問編集画面の中央上部に「テンプレート」というボタンをクリックして、その内容に沿って質問を編集してください。
現状の質問だとTeratailの推奨していない質問「やってほしいことだけを記載した丸投げの質問」になるかと思います。
https://teratail.com/help/avoid-asking

Answer 1

2枚目以降の、イベント発火コードに修正点があった。

before

document.getElementById('message_image_0').addEventListener('change', (e) => {

after

document.getElementById('item-image').addEventListener('change', (e) => {

'message_image_0'

から

'item-image'

ファイル選択ボタンのidが違っていたところを修正