Geek Pedia

Menu
Search

Dynamic 5 Star Rating Script

JavaScript Tutorials
Nathan

Dynamic 5 Star Rating Script

A dynamic 5 star rating script that can be used along with a server-side language and AJAX to allow visitors to submit their vote in an interactive manner.

See this code in action

The only HTML elements that we’re going to need are 5 images and one div.

<body onload="loadStars()">
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:30px; height:30px; float:left;" /><br /><br />
<div id="vote" style="font-family:tahoma; color:red;"></div>
</body>

Let’s move on to the JavaScript code. First we’ll declare some variables that we will use later. As you’ve seen earlier, the body tag calls the loadStars() function. This function preloads the images used to represent the star when it is in focus and when it is not.

<script type="text/javascript">
<!--
var set=false;
var v=0;
var a;
function loadStars()
{
   star1 = new Image();
   star1.src = "star1.gif";
   star2 = new Image();
   star2.src= "star2.gif";
}

Now let’s write the function that will change the stars on mouse over. If we point to star number 1, it should be highlighted; if we point to star number 2, star 2 and 1 should be highlighted, and so on. So we need to get the image’s ID in order to know how many and what stars to highlight. The images use the onmouseover event to trigger the function, and the parameter is it’s ID. I’ve also used an y variable (which is the current ID + 1) as a stop condition in the For loops that this function will use. Also you will see an set variable, i’ll explain that later in this tutorial.

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;
      }
   }
}

Depending on the image’s ID, the switch statement will run one of the For loops. If the ID is “2”, for example, the For loop will run from i=1 to i<3, changing the first and second star and writing “2 stars” in a div. If the ID is “3” a For loop will be run that will write “3 stars” in a div and change star number 1, 2 and 3; and so on for the rest of the IDs.
We now have to make a function that will make the stars not be highlighted once they lose focus. For this, we will use the onmouseout event: onmouseout=”losehighlight(this.id)”.

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

This function makes all of the stars appear as not selected, and changes the content of the div to an empty string.
Now we have to write a function that will make the stars remain highlighted once clicked on. So, the event will be onclick=”setStar(this.id)”.
Finally it’s time to explain the set variable. To avoid rating one way and then rating again we’ve used this set variable. If no star has been clicked the variable will have the false value; after you rate (click on a star) the variable will become true, and the If condition in the functions will not allow to rate again (or highlight stars).

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;
      document.getElementById('vote').innerHTML="Thank you for your vote!"
   }
}

You can see that set becomes true at the end of the function. You can also see the flash() function being called. That function makes the star remain selected, and it also makes it blink a few times, for a nice effect.

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>

The “v” variable will make this function run for 6 times. You can see here the switch statement and for loops that we used in the highlight function(). The difference is the setTimeout() method that will call the function after 200 miliseconds. So basically, when this function is called, v is 0 and the stars’ appearance change, then v becomes 1 and the function is called again after 200 miliseconds changing the appearance of the stars again (as stated in case 1) and v becomes 2. This will go on until v becomes 6, creating a blinking effect.

You can use the code below to create your dynamic star rating system:

<html>
<head>
<title>Dynamic 5 Star Rating Script </title>
<script type="text/javascript">
<!--
var set=false;
var v=0;
var a;
function loadStars()
{
   star1 = new Image();
   star1.src = "star1.gif";
   star2 = new Image();
   star2.src= "star2.gif";
}

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;
   document.getElementById('vote').innerHTML="Thank you for your vote!"
   }
}
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>
</head>
<body onload="loadStars()">
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="1" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="2" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="3" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="4" style="width:30px; height:30px; float:left;" />
<img src="star1.gif" onmouseover="highlight(this.id)" onclick="setStar(this.id)" onmouseout="losehighlight(this.id)" id="5" style="width:30px; height:30px; float:left;" /><br /><br />
<div id="vote" style="font-family:tahoma; color:red;"></div>
</body>
</html>
Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Back To Top