jsで要素を取得できないのを解決したいです。

前提・実現したいこと

アルバイトのシフト作成のアプリを作っています。
DBに保存されたデータをjsを使い繰り返し処理されているdiv要素をshift_tableのtdの中にドラッグ&ドロップができるようにしたいと考えています。

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

下記のエラーが発生し、ドラッグする要素,ドラッグ後に入れ込む要素共に取得できません。ファイルの配置の問題かと思い、ファイルの移動やファイルを参照するコードを変更などしてみたのですがうまく行きません。

Uncaught ReferenceError: onDragStart is not defined
    at HTMLDivElement.ondragstart

Uncaught ReferenceError: onDragOver is not defined
    at HTMLTableCellElement.ondragover

該当のソースコード

Ruby,
1html
2
3<div class="shift_main">
4  <%= params[:date_save] %>
5  <div class="shift_set">
6    <table class="shift_table">
7      <tbody class="shift_table_body">
8        <tr class="shift_line">
9          <td id="shift_num1"></td>
10          <td id="shift_num2"></td>
11        </tr>
12        <tr class="shift_line">
13          <td id="shift_num3"></td>
14          <td id="shift_num4"></td>
15        </tr>
16        <tr class="shift_line">
17          <td id="shift_num5"></td>
18          <td id="shift_num6"></td>
19        </tr>
20        <tr class="shift_line">
21          <td id="shift_num7"></td>
22          <td id="shift_num8"></td>
23        </tr>
24        <tr class="shift_line">
25          <td id="shift_num9"></td>
26          <td id="shift_num10"></td>
27        </tr>
28        <tr class="shift_line">
29          <td id="shift_num11"></td>
30          <td id="shift_num12"></td>
31        </tr>
32        <tr class="shift_line">
33          <td id="shift_num13"></td>
34          <td id="shift_num14"></td>
35        </tr>
36        <tr class="shift_line">
37          <td id="shift_num15"></td>
38          <td id="shift_num16"></td>
39        </tr>
40        <tr class="shift_line">
41          <td id="shift_num17"></td>
42          <td id="shift_num18"></td>
43          </tr>
44        <tr class="shift_line">
45          <td id="shift_num19"></td>
46          <td id="shift_num20" ondragover="onDragOver(event);" ondrop="onDrop(event);"></td>
47        </tr>
48      </tbody>
49    </table>
50    <table>
51      <tbody>
52        <% @num.each do |day| %>
53          <tr>
54            <td class="employee">
55              <div id="human1" class="employee_name" draggable="true" ondragstart="onDragStart(event);">
56                <%= day.name %>
57              </div>
58            </td>
59          </tr>
60        <% end %>
61      </tbody>
62    </table>
63  </div>
64</div>

js
drag_and_drop.js

function onDragStart(event) {
  event.dataTransfer.setData('text/plain', event.target.id);

  event.currentTarget.style.backgroundColor = 'yellow';
}

function onDragOver(event) {
  event.preventDefault();
}

function onDrop(event) {
  const id = event.dataTransfer.getData('text');
  const draggableElement = document.getElementById(id);
  const dropzone = event.target;
  dropzone.appendChild(draggableElement);
  event.dataTransfer.clearData();
}

試したこと

ファイルの場所の検討とjsファイルの中の変数など色々といじってみましたが、自力での解決ができませんでした。
https://www.digitalocean.com/community/tutorials/js-drag-and-drop-vanilla-js-ja

コードは上記の記事を参考に記述しました。

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

Rubyのバージョンは6.0.0です。また、カレンダーの機能を使うためにsimplecalendarのGemを使用しています。

初めての質問で至らない点もあるかと思いますが、追記などはすぐに対応できるようにしますので、お答えいただけると幸いです。

追記

ファイルの情報が不十分でした。
こちらはappulication.jsにて

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

上記のファイルを呼び出しています。

またapplication.html.erbでは

<!DOCTYPE html>
<html>
  <head>
    <title>ShiftApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

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

といった記述をしています。

ファイル構成としては

app
→javascript
→→packs
→→→application.js
→→drag_and_drop.js
→views
→→layouts
→→→application.html.erb
→→shift
→→→create.html.erb

上記の構成になっています。

WhiteTempest

2021/02/03 09:49

参考にされているページでも以下の部分にて、明確に説明してありますよ。「次に、新しいscript.jsファイルを作成します。」

WhiteTempest

2021/02/03 10:22

applicationでのrequire部を追記願えませんか？出来れば、環境などは思いつく限り記載いただいた方が、回答つきやすいですよ。

hakushin_man

2021/02/03 10:38

アドバイスありがとうございます！参考にさせていただき再度書き直させていただきました。もしよろしければお手隙の際にこちらをご覧いただけると幸いです。

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

回答1件

ベストアンサー

html内でjsの関数コールをされていますが、
html内でjsの読み込みがされていません。
※jsの定義はありますが、htmlは、jsの内容を知らない状態

<script type="text/javascript" src="xxx.js"></script>

などのように、読み込みをおこないましょう。
※xxxはhtmlからの相対パスを設定してください。

投稿2021/02/03 09:46

WhiteTempest

総合スコア404

hakushin_man

2021/02/03 09:59

ご回答ありがとうございます！！追記をしたのですが、jsの読み込みに関してはapplication.jsの中でrequire("drag_and_drop")←質問欄に入れさせていただいたjsファイルの名称がdrag_and_drop.jsという名前ですとしているのですが、これでは読み込みがうまくできないのでしょうか？初学者で申し訳ないですが、ご回答いただけると幸いです。。

WhiteTempest

2021/02/03 10:46

require("drag_and_drop") これは、パスは合っていますか？ Ruby on Railsと仮定しますが、 app/javascript/drag_and_drop.js の場所にきちんとファイル格納されていますか？ [参考] https://nobunobu1717.site/?p=1292

hakushin_man

2021/02/03 10:59

Ruby on Railsを使用しており、今確認したところapp/javascript/drag_and_drop.jsの場所に格納されていました。参考ページも読ませていただきました！こちらに記載の通りのファイル構成になっておりました。

WhiteTempest

2021/02/03 11:31

簡単な切り分けのため、一度Application.jpのrequireではなく、 html上でのscriptタグで動くか確認してみてはいかがでしょうか？動いた場合、requireにて読み込みが正常に出来ていないことが分かりますので。

hakushin_man

2021/02/03 14:18

お返事遅くなり申し訳ありません。scriptタグで動いたのでうまく読み込みができていないことが原因でした。頑張って探してみます！かなり多く返信いただきありがとうございました。

WhiteTempest

2021/02/03 23:01

ひとつだけ気になるところをご連絡です。 requireですが、自作物のrequireの場合、シングルクォーテーションが多く見かけられました。質問者様ははダブルクォーテーションを使用されていました。一度シングルクォーテーションでもお試しください。変化はないかもしれませんが。。。