如何通过if else实现按钮按选中表情跳转至对应HTML页面

问题根源 #

你的代码在点击按钮时会遍历所有<small>标签，每次循环都会重新赋值window.location。由于最后一个<small>对应的是“Satisfied”，不管用户选中哪个表情，循环执行到最后都会触发else分支，导致始终跳转到好评页面。

修复方案 #

核心思路是先跟踪用户实际选中的表情，再根据选中结果跳转。具体实现：

1. 给每个表情卡片添加点击事件，记录当前选中的评级文本
2. 点击提交按钮时，根据记录的评级判断跳转目标

修改后的JavaScript代码 #

const sendButton = document.querySelector("#send");
const ratings = document.querySelectorAll(".rating");
let selectedRating = "Satisfied"; // 默认选中初始激活的Satisfied

// 绑定表情卡片点击事件，更新选中状态与记录值
ratings.forEach(rating => {
  rating.addEventListener("click", () => {
    // 移除所有卡片的active样式
    ratings.forEach(r => r.classList.remove("active"));
    // 给当前点击的卡片添加active样式
    rating.classList.add("active");
    // 记录当前选中的评级文本
    selectedRating = rating.querySelector("small").textContent;
  });
});

// 提交按钮点击逻辑
sendButton.addEventListener("click", () => {
  if (selectedRating === "Unhappy" || selectedRating === "Neutral") {
    window.location = "negative_review.html";
  } else {
    window.location = "positive_review.html";
  }
});

方案说明 #

• 用selectedRating变量专门存储用户选中的评级，避免遍历所有元素导致的覆盖问题
• 点击表情卡片时同步更新选中的视觉状态（active类）和记录值
• 提交时直接根据记录值判断跳转目标，逻辑清晰且不会被循环干扰

额外优化提示 #

• 可以给表单绑定submit事件监听，避免用户按回车键提交时逻辑失效
• 优先使用textContent获取文本内容，比innerHTML更安全，避免HTML内容干扰判断

内容的提问来源于stack exchange，提问作者DevelopingCoder