如何在点击时更改评分字段的颜色？

<div class="rating">
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
  <span class="star">★</span>
</div>

.rating {
  font-size: 24px;
}

.star {
  color: gray;
  cursor: pointer;
}

.star.active {
  color: orange;
}

// 获取所有评分字段的DOM元素
const stars = document.querySelectorAll('.star');

// 为每个评分字段添加点击事件监听器
stars.forEach(star => {
  star.addEventListener('click', () => {
    // 移除所有评分字段的active类名
    stars.forEach(star => star.classList.remove('active'));
    
    // 添加active类名到被点击的评分字段
    star.classList.add('active');
  });
});