Question

Basically, I’ve created a 5-star rating system. Pretty typical. It shows how many stars other people have given the item, and then when a user hovers over the stars, it lights up x number of stars based on how many they’re over.

It’s all run by AJAX. They click 5 stars it automatically adds their 5-star rating to the group. The problem is that after they rate it I want to turn the system off, but I can’t seem to be able to do that.

I’ve tried everything I can think of. I’ve tried using element.disable for the a hrefs and for the div, but it still lets them vote away, over and over again, at least in firefox…. Can anyone help me out with a method to simply “freeze” the stars on what the user voted?? If I need to add code, that’s cool! I figured it probably wasn’t necessary in this situation!

I probably should have added. For complicated reasons, this is straight js, not jquery or anything else.

Answer 1

It really depends on how you’ve implemented your code, but say you have some links:

<div id="star-1" class="rate-it"><!-- HTML markup for your 5 stars --></div>
<div id="star-2" class="rate-it"><!-- HTML markup for your 5 stars --></div>

and have dynamically added the onclick to the base div, then in the called function you would do something like this:

function rateStars() {
   if(!this.rated) {
      this.rated = true;
      ...other code...
   }
}

it kinda depends what is in scope, but this would work if the HTML element is the scope.