如何在span元素中展示选中的评分结果？

问题描述 #

制作交互式评分组件时，点击评分按钮可实现变色，提交按钮能切换至感谢页面，但选中的评分无法显示在<span id="rating">元素内，尝试在forEach函数中添加if语句未实现目标效果。

原代码 #

JavaScript

const allBtns = document.querySelectorAll('.btn');

allBtns.forEach(btn => {
  btn.addEventListener('click', function onClick() {
    btn.style.backgroundColor = 'orange';
  })
});

function ShowAndHide() {
  let y = document.querySelector('.ratingbox');
  let x = document.querySelector('.thankyou');
  if (x.style.display == 'none') {
    y.style.display = 'none';
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

HTML

<div class="ratingbox">
  <div class="backgroundstar">
    <img src="images/icon-star.svg" alt="" class="star">
  </div>

  <div class="writing">
    <h1>How did we do?</h1>
    <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
  </div>

  <div class="flexbox">
    <ul>
      <li><button class="btn"><p id="num">1</p></button></li>
      <li><button class="btn"><p id="num">2</p></button></li>
      <li><button class="btn"><p id="num">3</p></button></li>
      <li><button class="btn"><p id="num">4</p></button></li>
      <li><button class="btn"><p id="num">5</p></button></li>
    </ul>
    <button class="submit" onclick="ShowAndHide()">SUBMIT</button>
  </div>
</div>

<div class="thankyou " style="display: none; ">
  <div class="message ">
    <img src="https://via.placeholder.com/50" alt=" " class="img ">
    <div class="selected ">
      <span id="rating "></span>
    </div>
    <div class="greeting ">
      <h2>Thank you!</h2>
      <p id="appreciate ">We appreciate you taking the thime to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
      </p>
    </div>
  </div>
</div>

解决方案 #

1. 修复HTML的ID重复问题

HTML中id属性必须唯一，将所有<p id="num">修改为<p class="num">，避免DOM选择冲突。

2. 新增变量存储选中评分

在JavaScript开头定义变量selectedRating，用于持久化用户选中的评分值：

let selectedRating = '';

3. 修改按钮点击事件逻辑

点击评分按钮时，不仅设置当前按钮变色，还要记录评分值，并重置其他按钮的样式（确保只有当前选中按钮为橙色）：

allBtns.forEach(btn => {
  btn.addEventListener('click', function onClick() {
    // 重置所有按钮样式
    allBtns.forEach(b => b.style.backgroundColor = '');
    // 设置当前按钮选中样式
    btn.style.backgroundColor = 'orange';
    // 获取并存储当前评分值
    selectedRating = btn.querySelector('.num').textContent;
  })
});

4. 更新提交函数，插入评分到指定元素

在ShowAndHide函数中，切换到感谢页面时，将选中的评分插入到<span id="rating">中，同时添加重置逻辑：

function ShowAndHide() {
  let y = document.querySelector('.ratingbox');
  let x = document.querySelector('.thankyou');
  const ratingSpan = document.getElementById('rating');
  
  if (x.style.display == 'none') {
    y.style.display = 'none';
    x.style.display = 'block';
    // 插入选中的评分文本
    ratingSpan.textContent = `You selected ${selectedRating} out of 5`;
  } else {
    x.style.display = 'none';
    y.style.display = 'block';
    // 重置选中状态和评分值
    selectedRating = '';
    allBtns.forEach(b => b.style.backgroundColor = '');
    ratingSpan.textContent = '';
  }
}

完整修改后代码

JavaScript

const allBtns = document.querySelectorAll('.btn');
let selectedRating = '';

allBtns.forEach(btn => {
  btn.addEventListener('click', function onClick() {
    allBtns.forEach(b => b.style.backgroundColor = '');
    btn.style.backgroundColor = 'orange';
    selectedRating = btn.querySelector('.num').textContent;
  })
});

function ShowAndHide() {
  let y = document.querySelector('.ratingbox');
  let x = document.querySelector('.thankyou');
  const ratingSpan = document.getElementById('rating');
  
  if (x.style.display == 'none') {
    y.style.display = 'none';
    x.style.display = 'block';
    ratingSpan.textContent = `You selected ${selectedRating} out of 5`;
  } else {
    x.style.display = 'none';
    y.style.display = 'block';
    selectedRating = '';
    allBtns.forEach(b => b.style.backgroundColor = '');
    ratingSpan.textContent = '';
  }
}

HTML

<div class="ratingbox">
  <div class="backgroundstar">
    <img src="images/icon-star.svg" alt="" class="star">
  </div>

  <div class="writing">
    <h1>How did we do?</h1>
    <p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering! </p>
  </div>

  <div class="flexbox">
    <ul>
      <li><button class="btn"><p class="num">1</p></button></li>
      <li><button class="btn"><p class="num">2</p></button></li>
      <li><button class="btn"><p class="num">3</p></button></li>
      <li><button class="btn"><p class="num">4</p></button></li>
      <li><button class="btn"><p class="num">5</p></button></li>
    </ul>
    <button class="submit" onclick="ShowAndHide()">SUBMIT</button>
  </div>
</div>

<div class="thankyou" style="display: none;">
  <div class="message">
    <img src="https://via.placeholder.com/50" alt="" class="img">
    <div class="selected">
      <span id="rating"></span>
    </div>
    <div class="greeting">
      <h2>Thank you!</h2>
      <p id="appreciate">We appreciate you taking the time to give a rating.<br> If you ever need more support, don't hesitate to <br> get in touch!
      </p>
    </div>
  </div>
</div>

关键说明 #

• 通过selectedRating变量持久化选中的评分值，解决提交时无法获取选中值的问题。
• 点击按钮时重置其他按钮样式，确保选中状态唯一。
• 在提交切换页面时，将变量值插入到目标span元素中，完成评分展示。

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