script.js:23 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener&#039-CodePudding

I have 3 html files for this page. index.html, positive review page and negative review page. I already have my JavaScript redirected to the right pages after clicking the emojis feedback and then the button. After clicking the button depending on the emojis clicked it redirects to the negative review page, if the emoji selected is neutral or unhappy and, if the emoji selected is satisfied it redirects to the positive review page. I am now stuck with subject line error in the console. The below is my Javascript file, followed by index.html file. Kindly assist me, thanks in advance.

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

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

                <div >
                    <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  id="send">Send Review</button>
        </div>
        <script src="script.js"></script>
    </body>
</html>

negative 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>Thank you!</strong>&nbsp;<i ></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>

CodePudding user response：

On the negative review page, there isn't a button with the id send, so your querySelector call in line 1 returns null. To fix this, you should conditionally add an event listener like so:

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";
    }
  });
}