基于JavaScript的随机星级评分系统重置问题求助

嘿，这个问题很好解决！你现在的代码每次点击按钮时，只会给指定数量的星星设置黄色，但没有把之前已经变黄的星星重置回灰色，所以第二次点击时旧的黄色星星会保留下来，就出现了星级叠加的问题。

只需要在starsNote函数里，生成随机星级之前，先把所有星星的颜色重置为初始的灰色就可以了。

修改后的JavaScript代码 #

let starsContainer = document.querySelector('.stars')
starsContainer.style.color = "gray"

function starsNote (){
    let star1 = document.getElementById('first-star')
    let star2 = document.getElementById('second-star')
    let star3 = document.getElementById('third-star')
    let star4 = document.getElementById('fourth-star')
    let star5 = document.getElementById('last-star')
    let starArray = [star1, star2, star3, star4, star5]

    // 新增：先重置所有星星为灰色
    starArray.forEach(star => {
        star.style.color = "gray"
    })

    // 生成1-5的随机数
    randomStarNumber = Math.ceil(Math.random() * 5)
    // 给对应数量的星星设置黄色
    for (let i = 0; i < randomStarNumber; i++){
        starArray[i].style.color = "#FFB703"
    }
}

document.getElementById('btn').addEventListener('click', () => {
    starsNote()
})

核心修改说明 #

• 我添加了starArray.forEach(star => { star.style.color = "gray" })这行代码，它会遍历所有星星元素，把它们的颜色先重置为灰色。
• 这样每次点击按钮时，都会先清空之前的星级状态，再生成新的随机星级，就不会有旧星星保留颜色的问题了。

额外优化建议 #

你还可以简化代码，不用逐个获取星星元素，直接通过容器批量获取所有星星，让代码更简洁易维护：

let starsContainer = document.querySelector('.stars')
starsContainer.style.color = "gray"
// 一次性获取所有星星元素
const starArray = starsContainer.querySelectorAll('i')

function starsNote (){
    // 重置所有星星为灰色
    starArray.forEach(star => {
        star.style.color = "gray"
    })

    // 生成随机星级数量
    const randomStarNumber = Math.ceil(Math.random() * 5)
    // 设置对应数量的星星为黄色
    for (let i = 0; i < randomStarNumber; i++){
        starArray[i].style.color = "#FFB703"
    }
}

document.getElementById('btn').addEventListener('click', starsNote)

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