CODEWITHSUNDEEP
javascripthtmleventsevent-handlingdom-events
DevelopingCoder
DevelopingCoder

Reputation: 17

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

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

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

Upvotes: 0

Views: 306

Answers (1)

Leon Si
Leon Si

Reputation: 46

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

Upvotes: 2

Related Questions