Issue
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 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>
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";
}
}); Answered By - James Answer Checked By - Marie Seifert (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.