画像複数枚投稿時の各画像のプレビューの表示と投稿ボタンの表示に関して

Question

実現したいこと

複数枚の画像が投稿できるようにしたい。
選択した画像はプレビューを表示したい。

前提

フリマアプリを作っています。
商品を出品する際に画像を複数選択できるようにしたい。
一枚目を選択すると一枚目のプレビューが表示され、二枚目投稿用のボタンを表示するところまでは成功しています。

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

エラーメッセージの表示はありません。
二枚目以降もプレビューと次の画像の選択用のボタンを表示したいのですが上手くいきません。
４９行目のnewFileField.addEventListener("change", changedFileField);を追加すると一枚目のプレビューや二枚目の投稿ボタンも表示されなくなります

該当のソースコード

preview.js

document.addEventListener('DOMContentLoaded', function(){
  // 新規投稿・編集ページのフォームを取得
  const postForm = document.getElementById('new_item');
  // 新規投稿・編集ページのフォームがないならここで終了。「!」は論理否定演算子。
  const previewList = document.getElementById('previews');
  if (!postForm) return null;
  console.log("preview.jsが読み込まれました");
  

  // input要素を取得
  const fileField = document.querySelector('input[type="file"][name="item[images][]"]');
  // input要素で値の変化が起きた際に呼び出される関数
  fileField.addEventListener('change', function(e){

   // data-index（何番目を操作しているか）を取得
   const dataIndex = e.target.getAttribute('data-index');
   console.log( dataIndex);


    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);
    
    // 画像を表示するためのdiv要素を生成
    const previewWrapper = document.createElement('div');
    previewWrapper.setAttribute('class', 'preview');
    previewWrapper.setAttribute('data-index', dataIndex);
    // 表示する画像を生成
    const previewImage = document.createElement('img');
    previewImage.setAttribute('class', 'preview-image');
    previewImage.setAttribute('src', blob);

    // 生成したHTMLの要素をブラウザに表示させる
    previewWrapper.appendChild(previewImage);
    previewList.appendChild(previewWrapper);

    // 2枚目用のfile_fieldを作成
    const newFileField = document.createElement('input');
    newFileField.setAttribute('type', 'file');
    newFileField.setAttribute('name', 'item[images][]');


    // 最後のfile_fieldを取得
    const lastFileField = document.querySelector('input[type="file"][name="item[images][]"]:last-child');
    // nextDataIndex = 最後のfile_fieldのdata-index + 1
    const nextDataIndex = Number(lastFileField.getAttribute('data-index')) +1;
    newFileField.setAttribute('data-index', nextDataIndex);
  
    // 追加されたfile_fieldにchangeイベントをセット
    newFileField.addEventListener("change", changedFileField);

    // 生成したfile_fieldを表示
    const fileFieldsArea = document.querySelector('.click-upload');
    fileFieldsArea.appendChild(newFileField);


  });
});

フォームの該当部

    <div class="img-upload">
      <div class="weight-bold-text">
        商品画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
        <div id="previews"></div>
        <%= f.file_field :images, name: 'item[images][]', data: {index: 0}, id:"item-image" %>
        
      </div>
    </div>

試したこと

preview.jsの読み込みはうまくいってる
調べましたが全くわからず困っています

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

rubyのバージョンは6.0.0です。

Answer 1

    newFileField.addEventListener("change", changedFileField);

コード中に changeFileField という関数がないようなので、動かなくなるのは当然ですね。
おそらく、13行目で addEventListener() に渡している関数に changeFileField という名前を付ければいいんじゃないでしょうか。