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

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

CodePudding user response：

It looks like the correct experience to use is the one surrounded by <div >

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