Uncaught TypeError: Cannot read property 'length' of null at rating.js:4

user_8493831 0
Viewed 200

This is my own rating plugin

But I'm getting an error when I run this

This is the error:

Uncaught TypeError: Cannot read property 'length' of null
at rating.js:4

This is my rating.js

const stars = document.querySelector(".rating".children);
const ratingValue = document.querySelector("#rating-value");

for (let i = 0; i < stars.length; i++) {
    stars[i].addEventListner("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].addEventListner("click", function () {
        ratingValue.value = i + 1;
    })
}

I'm not an expert in JavaScript but I need to use this in my project.

javascript
3 Answers

Your selector is wrong, as you are trying to pass the children property of a string (which does not exist) to document.querySelector. This is equivalent to document.querySelector(undefined), which returns null.

Change

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

To

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

Moreover, addEventListner should be addEventListener.

user_95131840

This is what going wrong.

const stars = document.querySelector(".rating".children);
// should be
const stars = document.querySelector(".rating").children;
user_139704840

Two things- you have a typo when adding your event listeners. addEventListner- additionally, .children should be outside of the query selector's parenthesis. You're trying to target the children of that class you are querying, and thus it should be outside.

user_116721740
Related