CODEWITHSUNDEEP
javascriptpropertiesnulltypeerroraddeventlistener
DevelopingCoder
DevelopingCoder

Reputation: 17

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

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.

// 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" class="panel-container">
            <form>
                <strong>Great! Would you like to post your review?</strong>

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

Upvotes: 0

Views: 1197

Answers (2)

Peleg Haham
Peleg Haham

Reputation: 91

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" class="panel-container">
            <form>
                <strong>Great! Would you like to post your review?</strong>

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

Upvotes: 0

Abdellah Hariti
Abdellah Hariti

Reputation: 707

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.

Upvotes: 2

Related Questions