Home>

I want to reflect JavaScript in an HTML file

It seems that many people have similar problems, but there is too much information on different solutions and I don't know which one to refer to ...

GET http: // localhost: 3000/javascript/question.js net :: ERR_ABORTED 404 (Not Found) questions: 52
Corresponding source code
[Question.js]
const quiz = [
  {
    question:'What do you like to do? ',
    answers: ['I play soccer.','I really like to play tennis','I love it','Thanks'],


    correct:'I really like to play tennis'
  },

 {
    question:'What did you eat for breakfast this morning? ',
    answers: ['I love to eat','I am eating a banana','I ate an apple','I was eat sushi'],


    correct:'I ate an apple'
  },

 {
    question:'Are you happy to come here? ',
    answers: ['Why not ??','No, I am','I am here','You are happy'],


    correct:'Why not ??'
  },

 {
    question:'What are you doing now? ',
    answers: ['I was eating dinner','I eating an apple','I love to eat chocolate','I am having a toast for lunch'],


    correct:'I am having a toast for lunch'
  }
];;
const $window = window;
const $doc = document;
const $question = $doc.getElementById ('js-question');
const $buttons = $doc.querySelectorAll ('.btn');
const quizLen = quiz.length;
let quizCount = 0;
let score = 0;
const init = () =>{
  $question.textContent = quiz [quizCount] .question;
  const buttonLen = $buttons.length;
  let btnIndex = 0;
  while (btnIndex<buttonLen) {
    $buttons [btnIndex] .textContent = quiz [quizCount] .answers [btnIndex];
    btnIndex ++;
  }
};
const goToNext = () =>{quizCount ++;
  if (quizCount<quizLen) {
    init (quizCount);
  } else {
    // $window.alert ('Quiz finished!');
    showEnd ();
  }
};
const judge = (elm) =>{
  if (elm.textContent === quiz [quizCount] .correct) {
    $window.alert ('correct answer!');
    score ++;
  } else {
    $window.alert ('incorrect!');
  }
  goToNext ();
};
const showEnd = () =>{
  $question.textContent ='End! Your score is'+ score +'/' + quizLen +';
  const $items = $doc.getElementById ('js-items');
  $items.style.visibility ='hidden';
};
init ();
let answersIndex = 0;
let answersLen = quiz [quizCount] .answers.length;
while (answersIndex  {
    judge (e.target);
  });
  answersIndex ++;
}
[HTML file that I want to reflect JavaScript]
                              A simple primary alert—check it out!
                                    <button type = "button">Primary</button>                      <button type = "button">Primary</button>                      <button type = "button">Primary</button>                      <button type = "button">Primary</button>                  <script src = "../ javascript/question.js"></script>
[Application.js]require ("@ rails/ujs"). start ()
// require ("turbolinks"). start ()
require ("@ rails/activestorage"). start ()
require ("channels")
require ("../ good_answer")
// = require jquery
// = require_tree.
[Application.html.erb]<! DOCTYPE html><html><head><title>RECTURE</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'%>  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity = "sha384-Vkoo8x4CGsO3 + Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifj" ><script src = "https://kit.fontawesome.com/4fa5451ade.js" crossorigin = "anonymous"></script></head><% = yield%></body></html>

[Directory and file structure]

11/18 (Wed) 18:39 Update

[Current error statement]
questions: 1 GET http: // localhost: 3000/questions 500 (Internal Server Error)
[Index.html.erb] ← File that I want to reflect JS
                              A simple primary alert—check it out!
                                    <button type = "button">Primary</button>                      <button type = "button">Primary</button>                      <button type = "button">Primary</button>                      <button type = "button">Primary</button>                  <% = javascript_pack_tag'question'%>

11/18 (Wed) 19:15 Update
Currently, I am getting the following error.

]

  • Answer # 1

    app/javascriptThe following files areWebpackerIt is premised on the processing in, and cannot be referred to by itself unless otherwise set.

    app/javascript/packsIf you move to the followingjavascript_pack_tag'question'You can refer to it at.

  • Answer # 2

    After installing yarn and webpacker

    Describe require ("../ question") in application.js
    Describe<% = javascript_pack_tag'question'%>in index.html.erb

    After executing as above, JS was reflected.