星機能の実装について

Question

前提・実現したいこと

プログラミング初心者です。
javascriptで星のレビュー機能を実装しています。
マウスを乗せた時に色がつくようにし、色がついた星の平均点を出すようにしたいです。

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

Uncaught TypeError: Cannot read property 'children' of null

エラーメッセージが発生しており、星にマウスを乗せても変化なしで平均値も機能していません

該当のソースコード

<_form.html.erb>
<div class="rating-box mt-3">
  <%= form_with model: review, url: item_reviews_path(item), local: true do |f| %>
    <div class="main-rating">
      <div class="ratings mb-3">
        <span class="fa fa-star-o" id="star"></span>
        <span class="fa fa-star-o" id="star"></span>
        <span class="fa fa-star-o" id="star"></span>
        <span class="fa fa-star-o" id="star"></span>
        <span class="fa fa-star-o" id="star"></span>
      </div>
      <div class="ml-3 rating-value-display"><span id="rating-value-display">0</span>/5</div>
      <%= f.hidden_field :item_id, value: item.id %>
      <%= f.hidden_field :score, id:"rating-value" %>
      <%= f.text_field :content, class: "textarea" %>
      <%= f.submit "保存", class: "button mt-3"%>
      <%= link_to "他のレビューを見る", root_path(item), class: "button light ml-3 mt-3"%>
    </div>
  <% end %>
</div>


<review.js>
const stars = document.querySelector(".ratings").children;
const ratingValue = document.getElementById("rating-value");
const ratingValueDisplay = document.getElementById("rating-value-display");


let index;

for(let i=0; i<stars.length; i++){
  console.log(stars.length)
  stars[i].addEventListener("mouseover", function(){
    for(let j=0; j<stars.length; j++){
      stars[j].classList.remove("fa-star");
      stars[j].classList.add("fa-star-o");
    }
    for(let j=0; j<=i; j++){
      stars[j].classList.remove("fa-star-o");
      stars[j].classList.add("fa-star");
    }
  })
  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("fa-star");
      stars[j].classList.add("fa-star-o");
    }
    for(let j=0; j<=index; j++){
      stars[j].classList.remove("fa-star-o");
      stars[j].classList.add("fa-star");
    }
  })
}

試したこと

document.querySelector(".ratings").children;のquerySelectorをquerySelectorAllに変更してみましたが、続けてUncaught TypeError: Cannot read property 'length' of nullのエラーが発生しました。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

「JavaScript」だけて話をしたいのでしたらerbなど、フレームワーク要素は排除された方が良いかと思います。
JavaScriptのみ想定した環境だとコピペで動きません。

Answer 1

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

この処理がDOMが描画されるより早く実行されている可能性はないですか？
だとするとdocument.querySelector(".ratings")がnullになるので、当該のエラーが出るかと思います。

Comments

[shoukichi]

回答頂きありがとうございます。
調べてみた結果、原因は理解できましたがDOMが早く実行している場合の訂正方法などがあれば教えて頂きたいです。

[nekoniki]

手っ取り早いのは<review.js>の読み込み位置を後にする等です。
もしくは
window.onload = function() {}
で囲う等です。

[shoukichi]

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