Railsで個別のjavascriptファイルを読み込みたい

Question

個別のjavascriptを読み込むことができなくて困っています。

const stars = document.querySelector(".ratings").children;
console.log(stars.length)

const ratingValue = document.getElementById("rating-value");
const ratingValueDisplay = document.getElementById("rating-value-display")

let index;
for(let i=0; i<stars.length; i++){
    stars[i].addEventListener("mouseover", function(){
        for(let j=0; j<stars.length; j++){
            stars[j].classList.remove("fas");
            stars[j].classList.add("far");
        }
        for(let j=0; j<=i; j++){
            stars[j].classList.remove("far");
            stars[j].classList.add("fas");
        }
    })
    stars[i].addEventListener("click",function(){
	ratingValue.value = i+1;
	ratingValueDisplay.textContent = ratingValue.value;
	index = i;
	})
    stars[i].addEventListener("mouseout",function(){
	for(let j=0; j<stars.length; j++){
		stars[j].classList.remove("fas");
		stars[j].classList.add("far");
	}
	for(let j=0; j<=index; j++){
		stars[j].classList.remove("far");
		stars[j].classList.add("fas");
	}
	})
}

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

require("jquery")
require("review.js")

読み込みたいファイル名はreview.jsでjavascriptディレクトリの直下にあります
二つ目のファイルはapplication.jsです。

htmlに<script></script>で囲んでベタがきした場合には動いたのですが、それを切り離して個別のファイルにしたら動かなくなりました　。解決方法がわかる方がいらっしゃいましたらよろしくおねがいします。

Answer 1

Turbolinksを使う状況では、JavaScriptのロードは最初に1回だけになるので、ページ遷移したことを検知して、そこでページに対してJavaScriptを適用する必要があります。

document.addEventListener('turbolinks:render'で、ページ遷移のイベントを拾うことができます。

Comments

[alexanderpierce]

解決することができましたありがとうございました！