制作交互式评分页跳转后无法显示评分，报错Uncaught TypeError: rates is null

报错原因：Uncaught TypeError: rates is null #

你把同一个app.js同时引入了index.html和checked.html，但checked.html里没有.rating-container这个元素，所以document.querySelector('.rating-container')找不到对应元素，返回null，给null绑定点击事件自然就触发报错了。

评分不显示的原因 #

点击提交后直接跳转页面，原页面的rate变量不会自动传递到新页面；而且你在跳转前设置quali.textContent完全无效——跳转后浏览器会加载全新页面，原页面的DOM和变量都会被销毁，新页面的DOM是独立的，根本拿不到之前的rate值。

具体修复步骤 #

1. 拆分JS代码，避免跨页面执行无效逻辑 #

把app.js拆成两个独立文件，分别负责对应页面的逻辑：

• index.js：处理index.html的评分选择逻辑
• checked.js：处理checked.html的评分展示逻辑

index.js 代码：

const ratings = document.getElementsByClassName('rating');
let rate = 0;

// 给每个评分项添加选中逻辑，确保单选
for (let i = 0; i < ratings.length; i++) {
  ratings[i].addEventListener("click", function() {
    // 先移除所有评分项的active类
    for (let j = 0; j < ratings.length; j++) {
      ratings[j].classList.remove("active");
    }
    // 给当前点击的评分项添加选中样式
    this.classList.add("active");
    rate = this.innerHTML;
  });
}

// 提交按钮逻辑
function checked() {
  // 先判断是否选择了评分
  if (rate === 0) {
    alert("请先选择评分");
    return;
  }
  // 用localStorage存储选中的评分
  localStorage.setItem("selectedRate", rate);
  // 跳转结果页
  window.location.href = "checked.html";
}

checked.js 代码：

// 页面加载完成后读取存储的评分并显示
window.addEventListener('load', function() {
  const ratedSpan = document.querySelector('.rated');
  const selectedRate = localStorage.getItem("selectedRate");
  
  if (selectedRate) {
    ratedSpan.textContent = selectedRate;
    // 用完清除存储，避免下次打开页面残留旧值
    localStorage.removeItem("selectedRate");
  } else {
    // 若没有评分记录，跳回首页重新选择
    window.location.href = "index.html";
  }
});

2. 修改HTML文件的JS引入 #

• index.html里把<script src="app.js"></script>替换为<script src="index.js"></script>
• checked.html在body末尾添加<script src="checked.js"></script>（确保DOM加载完成后执行）

3. 补全checked.html的完整结构 #

你的checked.html代码不完整，补全后示例如下：

<body>
  <div id="rating-selected">
    <p>you selected <span class="rated"></span> out of 5</p>
  </div>
  <div class="text-container">
    <div class="title-container">
      <h1>Thank you!</h1>
    </div>
    <p>We appreciate you taking the time to give a rating. If you ever need more support, don’t hesitate to get in touch!</p>
  </div>
  <script src="checked.js"></script>
</body>

完成以上修改后，既能解决rates is null的报错，也能正常传递并显示选中的评分。

内容的提问来源于stack exchange，提问作者Manfredo Román