用javascript随机星级评分答案

【问题标题】：Random stars rating with javascript用javascript随机星级评分
【发布时间】：2022-01-30 15:52:06
【问题描述】：

我正在尝试通过单击一个按钮来创建一个随机星级系统。

单击按钮后，我想在屏幕上显示 1 到 5 之间的星数。

当我第二次点击按钮时，我想重置星级，但我不能。评分会保存在之前的星数上。

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
   <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/5.15.3/css/all.min.css" />
   <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="note">

    <div class="stars">
        <i id="first-star" class="fas fa-star"></i>
        <i id="second-star" class="fas fa-star"></i>
        <i id="third-star" class="fas fa-star"></i>
        <i id="fourth-star" class="fas fa-star"></i>
        <i id="last-star" class="fas fa-star"></i>
    </div>

    <button id="btn">Change</button>
    
</div>




    <script src="main.js"></script>
</body>

</html>

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]

// RANDOM NUMBER

    randomStarNumber = Math.ceil(Math.random() * 5)

// GET RANDOM STARS

    for (let i = 0; i < randomStarNumber; i++){
    starArray[i].style.color = "#FFB703"

    }


}



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

})

谢谢！

【问题讨论】：

你在哪里尝试重置颜色？

标签： javascript random rating

【解决方案1】：

问题在于您未能将星星的颜色重置为灰色。这意味着一旦星星颜色设置为黄色，它就会被卡住：因此您的星级只会增加而不会减少。

快速解决方法是在 for 循环之前简单地重置颜色：

starsContainer.querySelectorAll('.fas').forEach(el => el.style.color = "gray");
for (let i = 0; i < randomStarNumber; i++) {
  starArray[i].style.color = "#FFB703";
}

但是，有一种更好的方法：您只需遍历星星数组，然后根据它们的索引是否与给定的星级评分匹配来为它们分配颜色，而不是循环两次：

function starsNote() {
  // RANDOM NUMBER
  randomStarNumber = Math.ceil(Math.random() * 5);

  // GET RANDOM STARS
  starsContainer.querySelectorAll('.fas').forEach((el, i) => el.style.color = i <= randomStarNumber ? '#ffb703' : 'gray');
}

请参阅下面的概念验证：

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

function starsNote() {
  // RANDOM NUMBER
  randomStarNumber = Math.ceil(Math.random() * 5);

  // GET RANDOM STARS
  starsContainer.querySelectorAll('.fas').forEach((el, i) => el.style.color = i <= randomStarNumber ? '#ffb703' : 'gray');
}



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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div class="note">

  <div class="stars">
    <i id="first-star" class="fas fa-star"></i>
    <i id="second-star" class="fas fa-star"></i>
    <i id="third-star" class="fas fa-star"></i>
    <i id="fourth-star" class="fas fa-star"></i>
    <i id="last-star" class="fas fa-star"></i>
  </div>

  <button id="btn">Change</button>

</div>

【讨论】：

【解决方案2】：

您只需要使用您使用的任何技术重置所有星星，包括背景星星。

for (let i = 0; i < 5; i++){
    starArray[i].style.color = i < randomStarNumber ? "#FFB703" : "gray";
}

【讨论】：