I have a problem with stars animation on my portfolio. It doesn't change the color. I do not know why this happened, because previously it worked fine.
$(".star").on('click', function() {
document.getElementById("stars").value = this.id;
for (let i = 0; i <= this.id; i++) {
document.getElementById(this.id - i).style.color = "goldenrod";
}
});.d-inline { display:inline }
.star { cursor: pointer; font-size: 24px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="ratingDiv">
<div class="star d-inline" id="0">*<i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="1">*<i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="2">*<i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="3">*<i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="4">*<i class="fas fa-star stars"></i></div>
</div>
<br>
<input type="text" id="stars" value="" name="stars" hidden>
</p>This should do the trick:
$(".star").on('click', function(){
for(let i=0; i<= 4;i++){
document.getElementById(i).querySelector('.fa-star').style.color = "";
}
for(let i=0; i<= this.id;i++){
document.getElementById(i).querySelector('.fa-star').style.color = "goldenrod";
}
});
you are changing color of your div element but star is present in element inside the div change the line inside the loop with this.
document.getElementById(this.id-i).querySelector('.fa-star').style.color = "goldenrod";
you can use this method and contained click and hover
HTML:
<p>
<p class="username" style="color: #F2AC57;"><%= language.__('Ocena') %></p>
<div id="ratingDiv">
<div class="star d-inline" id="0"><i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="1"><i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="2"><i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="3"><i class="fas fa-star stars"></i></div>
<div class="star d-inline" id="4"><i class="fas fa-star stars"></i></div>
</div>
<br>
<input type="hidden" id="stars" value="" name="stars" autocomplete="off" />
</p>
JS:
$(document).ready(function () {
$(".star").on('click', function(){
if($("#stars").val().length < 1){
var id = $(this).attr('id');
for(let i = 0; i <= id; i++){
$('#'+i+' .stars').css({color:"goldenrod"});
}
$("#stars").val(id);
}
}).on("mouseover", function(){
if($("#stars").val().length < 1){
$('.stars').css({color:"black"});
var id = $(this).attr('id');
for(let i = 0; i <= id; i++){
$('#'+i+' .stars').css({color:"goldenrod"});
}
}
}).on("mouseout", function(){
if($("#stars").val().length < 1){
$('.stars').css({color:"black"});
}
});
});