javascriptが更新しないと発火しないため、解決策を教えていただきたいです。

前提・実現したいこと

〇前提
プログラミングを勉強し始めて、間もない初学者です。
添付画像の中で、javascriptを用いてタブ切り替え機能を実装しようとしています。

〇実現したいこと
「手続きフローチャート」を押した際に、タブが使えるようになってほしい。

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

〇現状
「手続きフローチャート」を押す→タブが発火しない。
「手続きフローチャート」→ページを更新→タブが発火

該当のソースコード

html
1<div class="header">
2  <div class="botton">
3    <%= link_to "トップページ", root_path %>
4  </div>
5
6  <div class="botton">
7    <%= link_to "みんなのオススメ記事", articles_path %>
8  </div>
9
10  <div class="botton">
11    <%= link_to "手続きフローチャート", flowcharts_path %>
12  </div>
13
14  <div class="botton">
15    <%= link_to "新規登録", new_user_registration_path %>
16  </div>
17
18  <div class="botton">
19    <%= link_to "ログイン", new_user_session_path %>
20  </div>
21
22  <div class="botton">
23    <%= link_to "管理者ログイン", new_admin_session_path %>
24  </div>
25</div>

html
1<script src="javascripts/flowchart.js"></script>
2フローチャート index<br>
3<% if admin_signed_in? %>
4  <%= link_to "フローチャート追加", new_flowchart_path %>
5<% end %>
6
7<div class="tab-area">
8  <div class="tab active">
9    タブ１
10  </div>
11  <div class="tab">
12    タブ２
13  </div>
14  <div class="tab">
15    タブ３
16  </div>
17  <div class="tab">
18    タブ４
19  </div>
20  <div class="tab">
21    タブ５
22  </div>
23</div>
24<div class="content-area">
25  <div class="content show">
26    フローチャートのタイトル１
27  </div>
28  <div class="content">
29    フローチャートのタイトル２
30  </div>
31  <div class="content">
32    フローチャートのタイトル３
33  </div>
34  <div class="content">
35    フローチャートのタイトル４
36  </div>
37  <div class="content">
38    フローチャートのタイトル５
39  </div>
40</div>
41
42東京都の各自治体ホームページ
43<div class="tab-area">
44  <div class="tab active">
45    飲食業
46  </div>
47  <div class="tab">
48    風営法
49  </div>
50  <div class="tab">
51    建設業法
52  </div>
53 <div class="tab">
54    入管法
55  </div>
56  <div class="tab">
57    その他
58  </div>
59</div>
60<div class="content-area">
61  <div class="content show">
62    <table border="1">
63      <tbody>
64        <tr>
65          <td><a href= https://www.city.suginami.tokyo.jp>杉並区</a></td>
66          <td><a href= https://www.city.tokyo-nakano.lg.jp/>中野区</a></td>
67        </tr>
68      </tbody>
69    </table>
70  </div>
71  <div class="content">
72    <div class="content show">
73    <table border="1">
74      <tbody>
75        <tr>
76          <td><a href= https://www.keishicho.metro.tokyo.jp/tetsuzuki/fuzoku/index.html>警視庁</a></td>
77        </tr>
78      </tbody>
79    </table>
80  </div>
81  <div class="content">
82    フローチャートのタイトル３
83  </div>
84  <div class="content">
85    フローチャートのタイトル４
86  </div>
87  <div class="content">
88    フローチャートのタイトル５
89  </div>
90</div>

CSS
1.tab-area {
2  display: flex;
3  justify-content: space-around;
4  background-color: #222e3e;
5  cursor: pointer;
6  .tab {
7    width: 303px;
8    height: 30px;
9    line-height: 30px;
10    text-align: center;
11    color: white;
12    border-right: 1px solid #50637b;
13    border-left: 1px solid #222e3e;
14  }
15  .tab.active {
16    background-color: #ccc;
17    color: #222e3e;
18    border: none;
19  }
20}
21.content-area {
22  font-size: 30px;
23  text-align: center;
24  .content {
25    display: none;
26  }
27  .content.show {
28    margin-top: 50px;
29    display: block;
30  }
31}

JS
1/*global $*/
2$(function() {
3  let tabs = $(".tab");
4  $(".tab").on("click", function() {
5    $(".active").removeClass("active");
6    $(this).addClass("active");
7    const index = tabs.index(this);
8    $(".content").removeClass("show").eq(index).addClass("show");
9  })
10})

試したこと

解決策がわからず、何を試したらよいか不明です。

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

不明点がありましたら、補足いたします。

補足

ruby
1Rails.application.routes.draw do
2  devise_for :admins, controllers: {
3    sessions: 'admins/sessions'
4  }
5  devise_for :users
6  root to: 'homes#top'
7  get '/search' => 'searches#search'
8  resources :articles do
9    resources :comments, only:[:create, :destroy]
10    resource :favorites, only:[:create, :destroy]
11  end
12  resources :flowcharts, only: [:new, :create, :show, :index, :destroy]
13end

ruby
1class FlowchartsController < ApplicationController
2  def new
3    @flowchart = Flowchart.new
4  end
5
6  def create
7    @flowchart = Flowchart.new(flowchart_params)
8    @flowchart.save
9    redirect_to flowcharts_path
10  end
11
12  def index
13  end
14
15  def show
16    @flowchart = Flowchart.find(params[:id])
17  end
18
19  def destroy
20  end
21
22  private
23  def flowchart_params
24    params.require(:flowchart).permit(:title, :introduction, :place)
25  end
26end

yambejp

2021/07/20 04:43

手続きフローチャートってページの上部のリンクの部分ですかね？ HTMLに記載がありませんが・・

n-s0120

2021/07/20 05:03

失礼しました。部分テンプレートにした部分を追記しました。

hirosnow

2021/07/20 07:28 編集

まずはブラウザの「検証」からjsが正常に動いているか確認しているか確認してもらえるでしょうか？

n-s0120

2021/07/20 07:32

何かしらのエラーが出ているようでした。〇更新前 Failed to load resource: the server responded with (JSのファイル名) a status of 404 () 〇更新後 GET （ページのアドレス） net::ERR_ABORTED 404 これは何のエラーなのでしょうか・・・？更新後は正常に作動しているので、エラーが出ているわけではない気がしたのですが・・・

hirosnow

2021/07/20 07:34

エラー文読んでもらえれば分かると思いますが、「(JSのファイル名) のファイルが見つかりません」と書いています。まずはjsファイルの格納場所と参照が正しいか確認してください。

n-s0120

2021/07/20 07:50

格納場所は、 (アプリ名)　>　app　> assets > javascripts > flowchart.js になります。参照の記載は、2番目のHTMLにあるように、 <script src="javascripts/flowchart.js"></script> と記載をしております。基本的なお話で恐縮ですが、解決策をご教示いただけますと幸いです。

hirosnow

2021/07/20 07:54

何のフレームワークを使っているのか分かりませんので、今までの情報のみだと判断できません。ルーティングの設定やパーミッション周りを確認してみてください。

n-s0120

2021/07/20 08:00

ルーティングやパーミッション周辺の情報を追記しました。よろしくお願いいたします。

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

回答2件

自己解決

Railsにデフォルトで含まれるgem「turbolinks」が原因でした。

js
1/*global $*/
2document.addEventListener("turbolinks:load"
3, function () {
4  $(function() {
5    let tabs = $(".tab");
6    $(".tab").on("click", function() {
7      $(".active").removeClass("active");
8      $(this).addClass("active");
9      const index = tabs.index(this);
10      $(".content").removeClass("show").eq(index).addClass("show");
11    });
12  });
13})