Question

未捕获的类型错误：无法读取 script.js:13 处的 null 属性（读取“addEventListener”）

2022-10-06

1088

javascript properties null typeerror addeventlistener

我被“无法读取 null 属性”类型的错误困住了。我看到页面运行正常，但在控制台中它抛出了这个主题行错误。

// 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>

Answer 1

此行尝试查找类 ratings-container 中的某些内容：

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

但 html 中没有该类的内容，因此 ratingsContainer 实际上是 null ，它没有 addEventListener 方法。

Answer 2

// 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>