'appendChild' エラー

初学者です。
画像をあげようとすると

Uncaught TypeError: Cannot read property 'appendChild' of null
at createImageHTML (preview.js:13)
at HTMLInputElement.<anonymous> (preview.js:25)
のようなエラーが検証ツールにて現れます

ジャバスクリプトに全然慣れておらず、
いろいろ調べたのですが解決に至りませんでした

application.js


require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('./preview')


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

//= require_tree .というのがデフォルトで存在せず、
node_modulesが何故かあります。

preview.js

<if (window.location.pathname === '/books/new') {
  document.addEventListener('DOMContentLoaded', function(){
    const ImageList = document.getElementById('sbox9')

   
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div')
 
      const blobImage = document.createElement('img')
      blobImage.setAttribute('src', blob)
    
      imageElement.appendChild(blobImage)
      ImageList.appendChild(imageElement)
    }

    document.getElementById('books_tag_image').addEventListener('change', function(e){
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      };

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);

      createImageHTML(blob)
    });
  });
}

投稿画面 new.html.erb

<body><div class="container">
<div class="sec1title">
    <h2>＊画像を投稿！＊</h2>
  </div>
  
<%= form_for @book, url:  books_path do |f| %>

  <div class="field" type="text">
    <%= f.label :name, "本の名前" %><br />
    <%= f.text_field :name %>
  </div>
  <div class="tag-field", id='tag-field'>
     <%= f.label :tag_name, "タグ" %>
     <%= f.text_field :tag_name, placeholder: "検索されやすいキーワードを入れましょう" %>
   </div>
  <div class="form-input">
   <div class="text-image-content">
     <%= f.label :content, "説明文" %><br />
  <%= f.text_area :content, placeholder: "話したい内容について、ご自由にお書きください" , rows: "12" %> 
  </div>
  <div class="genre" >
    <%= f.label :genre_id, "本のジャンル" %><br />
    <%= f.collection_select(:genre_id,Genre.all,:id,:type,{prompt: "---"},{class:"select-box"}) %>
  </div>
  <br /><br /> 
    <label class="form-image">
      <span class="image-file">画像</span>
      <%= f.file_field :image %>
    </label>
    <div class="image-stage", id="image-list"></div>
  </div>

  <div class="actions">
    <%= f.submit "投稿する", class: "btn1" %>
  </div>
<% end %>
</div>
</body>

application.html.erb

<!DOCTYPE html>
<html>
<head>
<title>Books</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<script type="text/javascript" src="pack/preview"></script>　エラー部

</head>

<body>
<%= yield %>
</body>
</html>

winterboum

2020/08/13 06:12

タグにJSを追加しましょう。Railsはrailsだけあれば５，６はいらないです。 JSの問題で、railsから呼んでるということだけ伝わればよいかとおもうので

tomsuma

2020/08/13 06:30 編集

すいません、初心者すぎる質問で大変恐縮なのですが <script type="text/javascript" src=今回は"pack/preview."></script> をapplication.html.erb内にやっても読み込まれません該当するhtml.erb内のhead内に書き込んでもダメでした。。 Failed to load resource: the server responded with a status of 404 (Not Found) 問エラーが出ますどのようにすればよろしいですか

winterboum

2020/08/13 06:32

本当にそう書いてあるなら html文法エラーになりそうですが。編集無しで、app/views/layout/aqpplication.html.erb(ですよね、それ書いてあるの）を質問欄に載せてください。

tomsuma

2020/08/13 06:34

``` <!DOCTYPE html> <html> <head> <title>Books</title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <script type="text/javascript" src="pack/preview"></script> </head> <body> <%= yield %> </body> </html> ``` こちらになります

winterboum

2020/08/13 06:35

ベタになり読みにくいので、質問欄を修正してそちらに

tomsuma

2020/08/13 06:51

失礼しました！

tomsuma

2020/08/13 07:48

こちらになります！

tomsuma

2020/08/13 11:26 編集

https://fuqda.hatenablog.com/entry/2019/03/10/185043 の記事を参考にサーバーを立ち上げてみたのですが、やはり、最初と同じエラーが出ます。

winterboum

2020/08/13 13:12

ｊｓが読み込まれない、というのは治ったようですか？そこはrailsの話しとおもったので、回答しましたが、その先はJSの世界で私弱いのでJSな方にタッチです。タグにjavascriptを追加しましょう

tomsuma

2020/08/13 13:30

かしこまりましたここまで付き合っていただきありがとうございます。

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

回答1件

pack/preview というと rails6ですね。タグだけでなく、質問本文中にversion書いておくのがよいです。

で、
「<script type="text/javascript" src=今回は"pack/preview."></script>
をapplication.html.erb内にやっても読み込まれません」
について言えば
pack/preview　は app/jabascript/pack に置いてありますか？
だと読んでくれません。<script type="text/javascript" src="pack/preview"></script>で読ませるには public/pack に置かないと。

でもそれは違う気がします。
「のようなエラーが検証ツールにて現れます」の解決とは別の（その一つ手前の）jsを読みこませる、という点で言えば

developなら　./bin/webpack-dev-server&　を
production なら ./bin/webpack の
実行が必要です

投稿2020/08/13 07:31

winterboum

総合スコア23347