@Yavanha
Posted
Hello,
The issue here is that you're declaring the same function five times. So it's the last function that remain that id used. Either use one function to handle the click or change the name of your functions.
I would go with the first way :
something like that:
div class="numbers">
<div id="click1" class="one stars" onclick="changeColor(event)">1</div>
<div id="click2" class="two stars" onclick="changeColor(event)">2</div>
<div id="click3" class="three stars" onclick="changeColor(event)">3</div>
<div id="click4" class="four stars" onclick="changeColor(event)">4</div>
<div id="click5" class="five stars" onclick="changeColor(event)">5</div>
</div>
let currentNumber = undefined;
function changeColor(event) {
if(currentNumbers) {
currentNumber.classLists.remove("clicked");
}
event.target.classList.add("clicked");
event.stopPropagation();
currentNumber = event.target;
}
so here you add the clicked class to the element that triggerd the click (event.target) then you stop the propagation of the event (no other element will catch the click ) and finally you keep a soft copy of the element that is currently clicked to reset it later;
hopefully it helps
Marked as helpful