Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at script.-CodePudding

I am fairly new to javascript. I am stuck with the 'cannot read properties of null' type error.. I see that the page is running correctly but in the console it throws this subject line error. Can some one please help me understand? Thank you!!

// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');

const removeActive = () => {
  for (let i = 0; i < ratings.length; i  ) {
    ratings[i].classList.remove('active');
  }
};

ratingsContainer.addEventListener('click', (e) => {
  if (e.target.parentNode.classList.contains('rating')) {
    removeActive();
    e.target.parentNode.classList.add('active');
  }
});

sendButton.addEventListener('click', () => {
  console.log(experience[0]);
  for (let i = 0; i < experience.length; i  ) {
    if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
      document.location.href = 'negative_review.html';
    } else {
      document.location.href = 'positive_review.html';
    }
  }
});

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        />
        <link rel="stylesheet" href="style.css" />
        <title>Feedback</title>
    </head>

    <body>
        <div id="panel" >
            <form>
                <strong>Great! Would you like to post your review?</strong>

                <br />
                <br />
                <a href="https://www.google.com/" >Google</a>
                <br />
            </form>
        </div>
        <script src="script.js"></script>
    </body>
</html>

CodePudding user response：

this line is trying to find something with the class ratings-container:

const ratingsContainer = document.querySelector('.ratings-container');

but there's nothing in the html with that class, so the ratingsContainer is effeectively null, which has no addEventListener method.

CodePudding user response：

the problem with the code is that sendButton element and ratingsContainer element are null. there are no elemnts in the html fitting the selector you wrote. hope I was helpful.

// const panel = document.querySelector("#panel");
const sendButton = document.querySelector('#send');
const ratingsContainer = document.querySelector('.ratings-container');
const ratings = document.querySelectorAll('.rating');
const experience = document.querySelectorAll('small');

const removeActive = () => {
  for (let i = 0; i < ratings.length; i  ) {
    ratings[i].classList.remove('active');
  }
};

ratingsContainer.addEventListener('click', (e) => {
  if (e.target.parentNode.classList.contains('rating')) {
    removeActive();
    e.target.parentNode.classList.add('active');
  }
});

sendButton.addEventListener('click', () => {
  console.log(experience[0]);
  for (let i = 0; i < experience.length; i  ) {
    if (experience[i].innerHTML === 'Unhappy' || experience[i].innerHTML === 'Neutral') {
      document.location.href = 'negative_review.html';
    } else {
      document.location.href = 'positive_review.html';
    }
  }
});

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
        />
        <link rel="stylesheet" href="style.css" />
        <title>Feedback</title>
    </head>

    <body>
        <div id="panel" >
            <form>
                <strong>Great! Would you like to post your review?</strong>

                <br />
                <br />
                <a href="https://www.google.com/" >Google</a>
                <br />
            </form>
        </div>
        <button type="button" id="send"></button>
        <div ></div>
        <script src="script.js"></script>
    </body>
</html>