JavaScript星级评分系统

Question

I have a working star rating system, but If a user has already voted and changes their mind on the vote, they cannot reset their vote.

Here is what I have in the Javascript:

<script type="text/javascript">

var set = false;
var v = 0;
var a;

function loadStars() {
    star1 = new Image();
    star1.src = "images/star1.png";
    star2 = new Image();
    star2.src = "images/star2.png";
}

function highlight(x) {
    if (set == false) {
        y = x * 1 + 1
        switch (x) {
        case "1":
            document.getElementById(x).src = star2.src;
            document.getElementById('vote').innerHTML = "One star";
            break;
        case "2":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Two stars"
            break;
        case "3":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Three stars"
            break;
        case "4":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Four stars"
            break;
        case "5":
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            document.getElementById('vote').innerHTML = "Five stars"
            break;
        }
    }
}

function losehighlight(x) {
    if (set == false) {
        for (i = 1; i < 6; i++) {
            document.getElementById(i).src = star1.src;
            document.getElementById('vote').innerHTML = ""
        }
    }
}

function setStar(x) {
    y = x * 1 + 1
    if (set == false) {
        switch (x) {
        case "1":
            a = "1"
            flash(a);
            break;
        case "2":
            a = "2"
            flash(a);
            break;
        case "3":
            a = "3"
            flash(a);
            break;
        case "4":
            a = "4"
            flash(a);
            break;
        case "5":
            a = "5"
            flash(a);
            break;
        }
        set = true;
        insertrating(x, '<?=$themeid?>');
        document.getElementById('vote').innerHTML = "Thank you!";
    }

    function flash() {
        y = a * 1 + 1
        switch (v) {
        case 0:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 1
            setTimeout(flash, 200)
            break;
        case 1:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 2
            setTimeout(flash, 200)
            break;
        case 2:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 3
            setTimeout(flash, 200)
            break;
        case 3:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 4
            setTimeout(flash, 200)
            break;
        case 4:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star1.src;
            }
            v = 5
            setTimeout(flash, 200)
            break;
        case 5:
            for (i = 1; i < y; i++) {
                document.getElementById(i).src = star2.src;
            }
            v = 6
            setTimeout(flash, 200)
            break;
        }
    }

</script>

How would I go about allowing the user to resubmit a vote?

My html looks like this:

<span style="float: left; text-align: left;"> Rate This Theme<br />
    <img src="images//star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="1" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="2" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="3" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="4" style="float: left;" /> 
    <img src="images/star1.png" onMouseOver="highlight(this.id)" onClick="setStar(this.id)" onMouseOut="losehighlight(this.id)" id="5" style="float: left;" /> 
</span> 

Answer 1

bootstrap V4 font-awesome pro jquery

$('.starts i').click(function(){
$('.starts i').removeClass('fas').addClass('fal');
var sindex=$('.starts i').index(this);
    for(var i=0;i<=sindex;i++){
        $('.starts i').eq(i).removeClass('fal').addClass('fas');
    }
})

<div class="starts h4 mt-3" style="color:#FBC02D">
<span class=" ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2 title"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
<span class="checked ml-2"><i class="fal fa-star"></i></span>
</div>

Answer 2

As far as I can tell, the only thing preventing the user from re-voting is your set variable.

   if (set==false)
   {
   ...  
   set=true;

Just get rid of the if clause and it should run even if set==true

Per Tomalak's comment, i forgot to mention that:

If the backend doesn't support this, then it will insert a new vote rather than changing the existing one. And since there doesn't appear to be any user identification, that would appear to be the case

If you don't have any user authentication, at least use a cookie or something to keep track of which user is what so that the vote is edited, not a new one created.

As for setting cookies, I'd recommend setting a cookie via Javascript once the user votes the first time. On the backend, whatever you're using for server-side technology should check to see if a cookie already exists, and if it does, edit the ranking entry instead of creating a new one. Here's a good resource on cookies in JS: http://www.quirksmode.org/js/cookies.html