How to redirect button to the correct html pages using if else

October 7, 2022

I have 3 html files for this page. index.html, positive review page and negative review page. I want my JavaScript to redirect to the pages after clicking the emojis feedback and then the button. After clicking the button depending on the emojis clicked it should redirect to the negative review page if the emoji selected is neutral or unhappy and if the emoji selected is satisfied to redirect to the positive review page. I am new and stuck with the below code. The below code takes me back to the positive review page.

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

sendButton.addEventListener("click", () => {
    for (let i = 0; i < experience.length; i++) {
        // console.log(experience[i].innerHTML);
        if (
            experience[i].innerHTML === "Unhappy" ||
            experience[i].innerHTML === "Neutral"
        ) {
            window.location = "negative_review.html";
        } else {
            window.location = "positive_review.html";
        }
    }
}); 

This is the index page only.

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

>Solution :

It looks like the correct experience to use is the one surrounded by <div class="active">

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