Estoy tratando de hacer un sistema aleatorio de clasificación de estrellas haciendo clic en un botón.
Me gustaría mostrar un número de estrellas entre 1 y 5 en la pantalla después de hacer clic en un botón.
Cuando hago clic en el botón por segunda vez, me gustaría restablecer la calificación de estrellas, pero no puedo. La calificación se guarda en los números anteriores de estrellas.
<!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() })Gracias !
El problema proviene de que no restableciste el color de las estrellas a gris. Esto significa que una vez que el color de una estrella se establece en amarillo, se atasca: por lo tanto, su calificación de estrellas solo aumentará y nunca disminuirá.
Una solución rápida será simplemente restablecer el color antes del bucle for :
starsContainer.querySelectorAll('.fas').forEach(el => el.style.color = "gray"); for (let i = 0; i < randomStarNumber; i++) { starArray[i].style.color = "#FFB703"; }Sin embargo, hay una mejor manera: en lugar de hacer un bucle dos veces, simplemente tiene que recorrer la matriz de estrellas y luego asignarles un color en función de si su índice coincide con la calificación de estrellas dada:
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'); }Vea la prueba de concepto a continuación:
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>Solo necesita restablecer todas las estrellas, incluidas las de fondo, con cualquier técnica que use.
for (let i = 0; i < 5; i++){ starArray[i].style.color = i < randomStarNumber ? "#FFB703" : "gray"; }