初学者です。
画像をあげようとすると
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>