javaScriptファイルより先にHTMLファイルを読み込む方法が知りたいです。

画像の投稿の際にプレビューを表示できるように実装中に下記のエラーが発生しました。
Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLInputElement.<anonymous>
調べてみたところjavascriptファイルが読み込む前にhtmlファイルが読み込めていないから起きたという原因だということがわかりました。しかしhtmlファイルを読み込む前にjavascriptを読み込まないようにする方法がわからないので教えていただきたく質問させていただきました。
ご教授のほどよろしくお願いいたします。

開発環境はrails6.0.0です。

app/javascript/packs/preview.js

ruby
1if (document.URL.match( /new/ ) || document.URL.match( /edit/ )) {
2  document.addEventListener('DOMContentLoaded', function(){
3    const ImageList = document.getElementById('image-list');
4
5    document.getElementById('main_menu_image').addEventListener('change', function(e){
6      const imageContent = document.querySelector('img');
7      if (imageContent){
8        imageContent.remove();
9      }
10      const file = e.target.files[0];
11      const blob = window.URL.createObjectURL(file);
12
13      const imageElement = document.createElement('div');
14      const blobImage = document.createElement('img');
15      blobImage.setAttribute('src', blob);
16
17      imageElement.appendChild(blobImage);
18      ImageList.appendChild(imageElement);
19    });
20  });
21}

app/views/main_menus/_form.html.erb

ruby
1<%= form_with(model: @main_menu, local: true) do |f| %>
2      <%= render 'error.messages', model: f.object %> 
3      <div class="field">
4        <p>料理名</p>
5        <%= f.text_field :name, placeholder: "親子丼" %>
6      </div>
7      <div class="field">
8        <p>カロリー</p>
9        <%= f.text_field :kcal, placeholder: "400" %>
10      </div>
11      <div class="field">
12        <label class="form-image">
13        <p>画像</p>
14        <%= f.file_field :image, class: 'hidden' %>
15    　　</label>
16      </div>
17      <div class="field">
18        <p>材料</p>
19        <%= f.text_area :ingredient, placeholder: "白菜 1/2" %>
20      </div>
21      <div class="field">
22        <p>説明</p>
23        <%= f.text_area :expiration, placeholder: "とろとろ卵の甘じょっぱい親子丼" %>
24      </div>
25      <div class="field">
26        <p>レシピ</p>
27        <%= f.text_area :recipe, placeholder: "鍋と玉ねぎを入れる" %>
28      </div>
29      <%= f.submit "投稿する", :class => 'submit_btn' %>
30      <div id="image-list"></div>
31  <%= image_tag @main_menu.image, id: 'image' if @main_menu.image.present? %>
32<% end %>

app/views/layouts/application.html.erb

ruby
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>MenuApp</title>
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <link rel="stylesheets" href="style.css">
11    <%= javascript_pack_tag 'application' %>
12    <link href="https://fonts.googleapis.com/css2?family=Kufam:ital@1&display=swap" rel="stylesheet">
13    <link rel="preconnect" href="https://fonts.gstatic.com">
14  </head>
15
16  <body>
17    
18    <%= yield %>
19   
20  </body>
21  
22</html>

takasima20

2021/01/26 11:16

onLoad で動くようにしたら?

snsan

2021/01/27 01:46

コメントありがとうございます。body.onloadで挙動確認してみましたが、うまくいきませんでした。

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

回答1件

ベストアンサー

しかしhtmlファイルを読み込む前にjavascriptを読み込まないようにする方法がわからないので教えていただきたく質問させていただきました。

真っ正直にやるなら、</body>の直前に<script>を置く、という方法があります。ただし、RailsでTurbolinksをかけている場合には適当ではありません。

投稿2021/01/26 11:20

maisumakun

総合スコア146018

snsan

2021/01/27 02:01

コメントありがとうございます。turbolinksをremoveしてからscriptタグで呼び出してみましたが、404 Not Foundとなりうまく動きませんでした。

maisumakun

2021/01/27 02:02

snsan

2021/01/27 02:09 編集

読み込むことには成功しましたが、画像を選択時に同じ内容のエラーが返ってくるようになりました。 Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLInputElement.<anonymous>

maisumakun

2021/01/27 02:18

単純に、document.getElementById('image-list')が見つからない（当該IDのエレメントが存在しない）事はありませんか？

snsan

2021/01/27 02:40

app/views/main_menus/_form.html.erbの３０行目に<div id="image-list"></div>を記述しているので大丈夫だと思います。

maisumakun

2021/01/27 02:49

Turbolinksは完全に止めましたか？ Turbolinksが有効な場合、DOMContentLoadedは最初のページロード時に1回実行されるだけとなります。

snsan

2021/01/27 03:04

1.GemFileから消去する。下記をコメントアウトして、bundleコマンドで更新する。 gem 'turbolinks', '~> 5' 2.参照しているJSから消去 app/javascript/packs/application.js の下記をコメントアウトする。 require("turbolinks").start() 使用している箇所から消去する。 app/views/application.html.eb 'data-turbolinks-track': 'reload'の部分を消す。 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 1 2 <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> yarnでturbolinksを消す。 yarn remove turbolinks 最後にキャッシュを消す。 rails tmp:cache:clear この順序に則って行いました。

maisumakun

2021/01/27 03:05

JavaScriptのステップ実行をして、状況を追いかけたりはしてみましたか？

snsan

2021/01/27 03:28 編集

javascriptがデバックできることを知りませんでした。してみましたところ13行めのImageList.appendChild(imageElement);で×がつきました。しかしながらここのどこが間違えているのかまでは見つけられませんでした。ステップ実行時 https://gyazo.com/a1e17656d36042efe2260c772fcba5fb

maisumakun

2021/01/27 03:27

ということは、ImageListがnullとなっているようです。

snsan

2021/01/27 04:07

preview.jsの全ての記述を const preview = () => {全ての記述} window.addEventListener("load", preview); で書き直してみたらエラーは無くなりましたが、そもそものイベント発火しなくなっているものだと考えられましたので、次に'DOMContentLoaded'をloadに変更しても同様でした。 nullの原因は読み込みの順序ではないのでしょうか？

maisumakun

2021/01/27 04:11

ページが表示された状況で、コンソールにdocument.getElementById('image-list')と打ち込んでみたら、エレメントは取得できますか？

snsan

2021/01/27 05:10

null となっています

maisumakun

2021/01/27 05:13

ということは、HTMLにimage-listが存在しないようです。

snsan

2021/01/27 05:28

解決できました！何度も相談に乗っていただきありがとうございました！