Добавление рейтинговой звезды на веб-сайте электронной коммерции JavaScript ⇐ Html

[Anonymous]

У меня проблемы с решением проблемы JavaScript. Я поделюсь своим кодом HTML и JavaScript. Вот чего я пытаюсь достичь:
, прежде чем нажимать на любую звезду, star-value.textContent должен быть ‘-’ .
Когда звезда нажимается, она должна измениться на значение этой звезды (например, бедная, средняя, ​​хорошо…). star-value.textContent Вернуться к ‘-’ .
Проблема: щелкнуть одну и ту же звезду снова не сдает ее на ‘-’ . Он просто остается в том же значении. < /P>
code: < /p>

Код: Выделить всё

const stars = document.querySelectorAll(".stars");
let selectedStars = 0;

stars.forEach(star => {
star.addEventListener("mouseover", () => {
const nthStar = parseInt(star.id.split("-")[1]);

stars.forEach((s, index) => {
s.textContent = (index < nthStar) ? "★" : "☆";
});
});

star.addEventListener("mouseleave", () => {
stars.forEach((s, index) => {
s.textContent = (index < selectedStars) ? "★" : "☆";
});
});

star.addEventListener("click", () => {
const nthStar = parseInt(star.id.split("-")[1]);
if (nthStar === selectedStars) {
selectedStars = 0;
return;
} else {
selectedStars = nthStar;
}

stars.forEach((s, index) => {
s.textContent = (index < selectedStars) ? "★" : "☆";
});

valueDetectOfReview(selectedStars);
});
});

const review = document.querySelector('.star-value');

function valueDetectOfReview(starNumber) {
switch (starNumber) {
case 0:
review.textContent = '-';
break;
case 1:
review.textContent = 'Very Poor';
break;
case 2:
review.textContent = 'Poor';
break;
case 3:
review.textContent = 'Average';
break;
case 4:
review.textContent = 'Good';
break;
case 5:
review.textContent = 'Excellent';
break;
default:
break;
}
}< /code>


Rating

☆
☆
☆
☆
☆

-

Подробнее здесь: https://stackoverflow.com/questions/796 ... ce-website