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



我有3个用于此页面的html文件。index.html、正面评论页面和负面评论页面。我希望我的JavaScript在点击表情符号反馈后重定向到页面,然后点击按钮。在根据点击的表情点击按钮后,如果选择的表情符号是中性或不愉快的,并且如果选择的表情符号满足重定向到正面评论页面,则应重定向到负面评论页面。我是新手,一直使用以下代码。下面的代码将我带回到正面评论页面。

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>

看起来正确的使用体验是被<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";
}
});

相关内容

  • 没有找到相关文章

最新更新