HTMLにJSファイルが適用されない

前提・実現したいこと

Bootstrapを利用してHTMLとjavascriptを使って簡単なゲームを作成、それをRails上で表示させたい。
HTMLページは読み込みが成功し、枠組み等が表示されていますが、JSファイルが読み込まれていない状況です。

発生している問題

Ruby on Railsに組み込む前には正しく読み込まれていましが、組み込み後では素のHTMLが表示されてしまいます。

該当のソースコード

ViewsQuizsIndex
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
20
21  <meta name="theme-color" content="#fafafa">
22</head>
23
24<body>
25
26  <div class="container">
27    
28    <div class="jumbotron mt-5">
29      <div class="d-flex justify-content-center">
30        <div id="js-question" class="alert alert-primary" role="alert">
31          A simple primary alert—check it out!
32        </div>
33      </div>
34      
35      <div id="js-items" class="d-flex justify-content-center">
36        <div class="m-2">
37          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
38        </div>
39        <div class="m-2">
40          <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button>
41        </div>
42        <div class="m-2">
43          <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button>
44        </div>
45      </div>
46    </div>
47  </div>
48  
49  <script src="index.js"></script>
50
51</body>
52
53</html>

js
1//問題文を定義
2const quiz = [
3  {
4    question: '回数券の精算方法はどれ？',
5    answers: ['差額精算' ,'打ち切り精算', '区間変更'],
6    correct: '打ち切り精算'
7  }, {
8    question: '定期券利用時に乗り越し精算を求めてきた、正しい精算方法はどれ？',
9    answers: [ '差額精算', '打ち切り精算', '区間変更'],
10    correct: '打ち切り精算'
11  }, {
12    question: '2日有効の切符で精算を求めてきた、発駅は正しい場合の精算方法はどれ？',
13    answers: [ '差額精算', '打ち切り精算', '区間変更'],
14    correct: '差額精算'
15  }, {
16    question: '3日有効の切符で大宮幹下東京行きの切符を出してきた、正しい精算方法はどれ？',
17    answers: [ '差額精算', '打ち切り精算', '区間変更'],
18    correct: '区間変更'
19  }, {
20    question: '大宮幹下東京行きの切符区間変更、正しい分岐駅はどれ？',
21    answers: [ '大宮', '武蔵浦和', '東京'],
22    correct: '武蔵浦和'
23  }, {
24    question: '1日有効のエド券の精算方法として正しいのはどれ？',
25    answers: [ '差額精算', '打ち切り精算', '区間変更'],
26    correct: '差額精算'
27  }, {
28    question: 'では、1日有効の大型券の精算方法として正しいのはどれ？',
29    answers: [ '差額精算', '打ち切り精算', '区間変更'],
30    correct: '差額精算'
31  }, {
32    question: '3日有効の切符で大宮幹下東京行きの企画券の場合、精算方法として正しいのはどれ？',
33    answers: [ '差額精算', '打ち切り精算', '区間変更'],
34    correct: '打ち切り精算'
35  }, {
36    question: '第1種、第2種障害者が単独で下車してきた、片道の営業キロが100キロを超える場合の割引率として正しいのはどれ？',
37    answers: [ '50%', '75%', '100%'],
38    correct: '50%'
39  }, {
40    question: '福島からICカードで乗車してきた方が精算を求めてきた、正しい精算対応はどれ？',
41    answers: [ '問答無用でICから引く', '経路を聞いてその額を引く', 'タッチすれば出れるのでタッチを促す'],
42    correct: '経路を聞いてその額を引く'
43  }
44];
45//長コードを短単語に定義
46const $window = window;
47const $doc = document;
48const $question = $doc.getElementById('js-question');
49const $buttons = $doc.querySelectorAll('.btn');
50
51const quizLength = quiz.length;
52let quizCount = 0;
53let score = 0;
54//問題によって表示を切り替え
55const init = () => {
56  $question.textContent = quiz[quizCount].question;
57  
58  const buttonLen = $buttons.length;
59  let btnIndex = 0;
60  
61  while(btnIndex < buttonLen){
62    $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex];
63    btnIndex++;
64  }
65};
66//回答数により次の問題へいくか、終わらせるかの分岐
67const goToNext = () => {
68  quizCount++;
69  if(quizCount < quizLength){
70    init(quizCount);
71  } else {
72    showEnd();
73  }
74};
75//正誤判定、正解ならスコアを１足して、不正解でも次の問題へ
76const judge = (elm) => {
77  if(elm.textContent === quiz[quizCount].correct){
78    $window.alert('正解!');
79    score++;
80  } else {
81    $window.alert('不正解!');
82  }
83  goToNext();
84};
85//終了時スコア表示をさせてボタンを隠す
86const showEnd = () => {
87  $question.textContent = '終了！あなたのスコアは' + score + '/' + quizLength + 'です';
88  
89  const $items = $doc.getElementById('js-items');
90  $items.style.visibility = 'hidden';
91};
92
93init();
94//問題によって選択肢を切り替え
95let answersIndex = 0;
96let answersLen = quiz[quizCount].answers.length;
97
98while(answersIndex < answersLen){
99  $buttons[answersIndex].addEventListener('click', (e) => {
100    judge(e.target);
101  });
102  answersIndex++;
103}

試したこと

「/app/views/layouts/application.html.erb」の”head”の位置に<%= javascript_include_tag 'application' %>を記載し
HTMLの</head>内に<%= javascript_include_tag 'index' %>と記載をしてみましたが
エラーが出て表示は変わらずでした。

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

Ruby on Rails 6
JavaScript
BootstrapはHP上のコードを記載

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

回答1件

ベストアンサー

Turbolinksが原因で期待通りに動かないようです。

JavaScript
1#app/javascript/packs/application.jsの最後に追記
2document.addEventListener("turbolinks:load", function(){
3
4#ここにJavaScriptを記載する
5
6})

Bootstrapは設定していないのですが、参考までにapplication.html.erbは下記のようになっています。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Untitled1</title>
5    <%= csrf_meta_tags %>
6    <%= csp_meta_tag %>
7
8    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10  </head>
11
12  <body>
13    <%= yield %>
14  </body>
15</html>
16

投稿2020/11/08 12:22

no1knows

総合スコア3365

taka262

2020/11/09 02:13

有難う御座います！no1knowsさんの仰る通り、Turbolinksがページ遷移後に効かなかった為にJavaScript が適用されなかったみたいです。 application.html.erbに関しては同様でしたので、BootstrapというよりTurbolinksが悪さしていたみたいです。本当に有難う御座いました！

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