i'm trying to make a random star-rating system by clicking on a button.
I would like to display a number of stars between 1 and 5 on the screen after clicking on a button.
When i click on the button a second time, i would like to reset the star rating but i can't. The rating is saved on the previous numbers of stars.
<!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()
})
Thank you !
The problem is coming from you failing to reset the color of the stars to grey. This means that once a star color is set to yellow, it is stuck: therefore your star rating will only increase and never decrease.
A quick fix will be to simply reset the color before the for loop:
starsContainer.querySelectorAll('.fas').forEach(el => el.style.color = "gray");
for (let i = 0; i < randomStarNumber; i++) {
starArray[i].style.color = "#FFB703";
}
However, there is a better way: instead of looping twice, you simply have to go through the array of stars and then assign them a color based on whether their index match the given star rating:
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');
}
See proof-of-concept below:
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>You just need to reset all the stars, including the background ones, with whatever technique you use.
for (let i = 0; i < 5; i++){
starArray[i].style.color = i < randomStarNumber ? "#FFB703" : "gray";
}