如何使用 if else 将按钮重定向到正确的 html 页面

Question

I have 3 html files for this page.这个页面有 3 个 html 文件。 index.html, positive review page and negative review page. index.html，正面评价页面和负面评价页面。 I want my JavaScript to redirect to the pages after clicking the emojis feedback and then the button.我希望我的 JavaScript 在单击表情符号反馈然后单击按钮后重定向到页面。 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 sendButton = document.querySelector("#send");
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>

Answer 1

It looks like the correct experience to use is the one surrounded by <div class="active">看起来正确的使用体验是被<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"; } });

如何使用 if else 将按钮重定向到正确的 html 页面

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-10-07 16:28:35

如何使用 if else 将按钮重定向到正确的 html 页面

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-10-07 16:28:35

解决方案1
0 已采纳 2022-10-07 16:28:35