画像の複数投稿機能を実装中、javascriptのファイルにエラーが出てしまう。

困っていること

Ruby on Railsで、記事投稿アプリを作成しています。
画像の複数投稿機能を実装中に、javascriptのブラウザのコンソールに、以下のエラーメッセージが発生しました。
「inputHTML」というファイル選択要素に変更が加わった時、選択した画像を表示する、という仕組みなのですが、この「inputHTML」が見つからないとエラーが出てしまいます。

変数や記述間違えがないかよく確認し直したのですが、どこが原因か分からず困っています。

どなたかご教授頂けると幸いです。
宜しくお願い致します。

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

console
1Uncaught ReferenceError: inputHTML is not defined
2    at HTMLDocument.<anonymous> (preview.js:29)

該当のソースコード

●preview.js(エラーが出ているファイル　　Error：29行目)

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

    // 選択した画像を表示する関数
    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', `article_image_${imageElementNum}`)
      inputHTML.setAttribute('name', 'article[images][]')
      inputHTML.setAttribute('type', 'file')


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

    inputHTML.addEventListener('change', (e) => {　<<<<★Error箇所(preview.js:29)
      
      file = e.target.files[0];
      blob = window.URL.createObjectURL(file);

      createImageHTML(blob);

    });
  });
}

●index.html.erb

<div class="container">
  <div class="row">
    <% @articles.each do |article| %>
      <%= link_to article do %>
        <div class="col-md-4 margin-top-5per article-block">
           <div class="articles">
              <% article.images.each do |image| %>
                <%= image_tag image, class:'images' %>
              <% end %>
            </div>
        </div>
       
          <div class="padding-bottom-15">
            <p class="title"><%= article.title %></p>
      <% end %>
            <div class="bottom-article">

              <div class="like">
                <% if user_signed_in? %>
                  <% if current_user.already_liked?(article) %>
                    <%= button_to article_like_path(article.id), class:"index-button", method: :delete do %>
                      <div class= "like-group">
                        <p class="heart-icon">
                           <i class="fas fa-heart"></i>
                        </p>
                        <p class="count-number">
                          <%= article.likes.count %>
                        </p>
                     </div>
                    <% end %>

                  <% else %>
                    <%= button_to article_like_path(article.id),class:"index-button" do %>
                      <div class= "like-group">
                        <p class="heart-icon">
                          <i class="far fa-heart"></i>
                        </p>
                        <p class="count-number">
                          <%= article.likes.count %>
                        </p>
                      </div>
                    <% end %>
                  <% end %>
                <% else %>
                  <span class="gray-heart"><i class="fas fa-heart"></i></span>
                <% end %>
              </div>

              <div class="date">
                <%= article.created_at.strftime('%Y/%m/%d') %>
              </div>

            </div>
          </div>
        </div>      
    <% end %>
  </div>
  <div class="row">
   <% if user_signed_in? && current_user.id == 1 %>
    <%= link_to '新規作成', new_article_path, class:'margin-top-5per btn btn-primary',style: 'margin-bottom: 30px' %>
  <% end %>
  </div>
</div>

●_form.html.erb

<%= form_with model:article do |f| %>

  <div class="form-group"> 
    <%= f.label :images, '画像' %>
    <%= f.file_field :images, name: 'article[images][]', id: "item-image" %>
  </div>

  <div id="image-list"></div>

  <div class="form-group padding-top-15">  
    <%= f.label :title, 'タイトル' %>
    <%= f.text_field :title, class: 'form-control' %>
  </div>
  
  <div class="form-group"> 
    <%= f.label :body, 'コンテンツ' %>
    <%= f.text_area :body, rows: 10, class: 'form-control' %>
  </div>
  <%= f.submit class: 'btn btn-success' %>
<% end %>

<% article.images.each do |image| %>
  <%= image_tag image, class: 'images' %>
<% end %>

●articles_controller.rb

class ArticlesController < ApplicationController
  before_action :find_article, only: [:show, :edit, :update, :destroy]
 

  def index
    @articles = Article.order(created_at: :desc)
  end

  def show
    @like = Like.new
  end

  def new
    @article = Article.new
  end

  def create
    @article = Article.new(article_params)
    if @article.save
      redirect_to @article, notice:'投稿が完了しました'
    else
      render :new, alert:'投稿できませんでした'
    end
  end

  def edit
  end

  def update
    if @article.update(article_params)
      redirect_to @article, notice:'更新できました'
    else
      render :new, alert:'更新できませんでした'
    end
  end

  def destroy
    if @article.destroy
      redirect_to @article, notice:'削除が完了しました'
    else
      redirect_to root_path, alert:'削除できませんでした'
    end
  end

private
  def find_article
    @article = Article.find(params[:id])
  end

  def article_params
    params.require(:article).permit(:title, :body, images: []).merge(user_id: current_user.id)
  end

end

●article.rb

class Article < ApplicationRecord
  validates :title, presence: true
  validates :body, presence: true
  belongs_to :user
  has_many :likes, dependent: :destroy
  has_many :liked_users, through: :likes, source: :user

  has_many_attached :images
end

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

回答1件

ベストアンサー

変数のスコープと整合性の問題です。
inputHTMLという変数はcreateImageHTML()という関数の中で宣言されますが、それ以外では存在しません。

inputHTML.addEventListener('change', (e) => {自体を関数createImageHTML()の中に入れる必要があるのでは。

投稿2021/02/13 04:20

m.ts10806

総合スコア80850

mayuphoo

2021/02/13 04:49

回答ありがとうございます！関数createImageHTML()の中に、inputHTML.addEventListener('change', (e) => { を入れたところ、正しく読み込まれました。変数のスコープやjavascriptの記述、もっと使いこなせるように頑張りたいと思います。ありがとうございました。