Question

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

2022-10-07

300

javascript html events event-handling dom-events

我有 3 个 html 文件用于此页面。index.html、正面评价页面和负面评价页面。单击表情符号反馈，然后单击按钮后，我的 JavaScript 已重定向到正确的页面。单击按钮后，根据单击的表情符号，它会重定向到负面评价页面，如果所选表情符号是中立或不高兴，如果所选表情符号满意，它会重定向到正面评价页面。我现在被控制台中的主题行错误卡住了。以下是我的 Javascript 文件，后面是 index.html 文件。请帮助我，提前谢谢。

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


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

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

sendButton.addEventListener("click", () => {
  const experience = document.querySelector(".active small");
  console.log(experience);
  if (
    experience.innerHTML === "Unhappy" ||
    experience.innerHTML === "Neutral"
  ) {
    window.location = "negative_review.html";
  } else {
    window.location = "positive_review.html";
  }
});

index.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">
            <h2>Welcome Text</h2>
            <strong
                >How was your experience <br />
                with us?
            </strong>
            <div class="ratings-container">
                <div class="rating">
                    <img
                        src="https://cdn-icons-png.flaticon.com/128/742/742752.png"
                        alt=""
                    />
                    <small>Unhappy</small>
                </div>

                <div class="rating">
                    <img
                        src="https://cdn-icons-png.flaticon.com/128/725/725085.png"
                        alt=""
                    />
                    <small>Neutral</small>
                </div>

                <div class="rating active">
                    <img
                        src="https://cdn-icons-png.flaticon.com/128/166/166549.png"
                        alt=""
                    />
                    <small>Satisfied</small>
                </div>
            </div>
            <form>
                <label for="feedback">Please Tell Us About Your Experience</label>
                <textarea name="" id="" maxlength="350" cols="30" rows="10"></textarea>
            </form>
            <button class="btn" id="send">Send Review</button>
        </div>
        <script src="script.js"></script>
    </body>
</html>

负面评价。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>Thank you!</strong>&nbsp;<i class="fa-solid fa-heart"></i>

                <br/>
                <br/>
                One of our team members will review your comments <br />
                and reach out to you to resolve any issues.
            <!-- </form> -->
        </div>
        <script src="script.js"></script>
    </body>
</html>

Answer 1

在负面评论页面上，没有带有 id send 的按钮，因此第 1 行中的 querySelector 调用返回 null 。要解决此问题，您应该有条件地添加事件监听器，如下所示：

if (sendButton !== null) {
  sendButton.addEventListener("click", () => {
    const experience = document.querySelector(".active small");
    console.log(experience);
    if (
      experience.innerHTML === "Unhappy" ||
      experience.innerHTML === "Neutral"
    ) {
      window.location = "negative_review.html";
    } else {
      window.location = "positive_review.html";
    }
  });
}