JavaScript Star Rating System

[j-kizzle]

I'm basically trying to make a star rating system similar to Windows Media Player or iTunes...

My thought are to start off with a string of gray star outlines in HTML:
☆☆☆☆☆
onMouseOver, they become filled stars in such a way that if I roll over say the 3rd star, stars 1,2 and 3 become filled:
✭✭✭☆☆
and then onMouseOut, they return to their previous state:
☆☆☆☆☆ -but if you click on a star, they stay filled and become black:
✭✭✭☆☆

Basically, whenever you scroll over a star:
1. all stars become gray
2. the star you're on and all stars below it become filled and all stars above it become outlines


The approach I had in mind would basically involve writing functions and calling them on onMouseOver, onMouseOut and onClick events for each star and my dilemma is my lack of extensive javaScript knowledge.

-How would I label the stars so that I can refer to them in functions?
ex)

function clickStar3(){
   `star1`.color='black';
   `star2`.color='black';
   `star3`.color='black';
   `star4`.color='gray';
   `star5`.color='gray';}

-With that kind of approach, how would I write functions to change the actual printout for the different stars?
ex)

function clickStar3(){
   `star1`='&#9733';
   `star2`='&#9733';
   `star3`='&#9733';
   `star4`='&#9734';
   `star5`='&#9734';}

I really appreciate your input...
Thanks in advance!

[j-kizzle]

OK, so I made a little progress...
Here is the the HTML code for the stars where 'style2' is defined as a gray font:

<div align="center" class="style2" onmouseover="this.style.cursor='default';">
  <span id="s1" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
  <span id="s2" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
  <span id="s3" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
  <span id="s4" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
  <span id="s5" onmouseout="outStar(this.id);" onmouseover="overStar(this.id);">☆</span>
</div>

And here are the javaScript functions:
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

function overStar(starID){
  var starNo = starID.charAt(1);
  for(var i=1; i<=starNo; i++){
    document.getElementById('s'+i).style.color="red";
  }
}
function outStar(starID){
  var starNo = starID.charAt(1);
  for(var i=1; i<=starNo; i++){
    document.getElementById('s'+i).style.color="#666666";
  }
}

Let's take it one step at a time- in the code I posted, the stars become red on mouseover and return back to gray on mouseout- the first thing I want to know how to do is change the stars from '☆' (&#9734) to '★' (&#9733) instead of changing the colors...

[j-kizzle]

OK guys, I figured it out...
Here is the HTML (style2's color is '#666666'):

<div align="center" class="style2" onmouseover="this.style.cursor='default';">
  <span id="s1" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
  <span id="s2" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
  <span id="s3" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
  <span id="s4" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
  <span id="s5" onclick="starSelection(this.id);"onmouseout="outStar(this.id);"onmouseover= "overStar(this.id);">☆</span>
</div>

And here's the JavaScript- BTW, 'document.MyReview.rating' is a hidden field in a form I have on the page called 'MyReview':

var color1 = "#faf4a3";
var color2 = "#f1ec5b";
var color3 = "#e1e558";
var color4 = "#c5c32b";
var color5 = "#978d00";

function overStar(starID){
  var starNo = starID.charAt(1);
  for(var i=1; i<=5; i++){
    document.getElementById('s'+i).style.color="#666666";
    if(i<=starNo) document.getElementById('s'+i).innerHTML="★";
    if(i>starNo) document.getElementById('s'+i).innerHTML="☆";
  }
}

function outStar(starID){
  var starNo = starID.charAt(1);
  var rating = document.MyReview.rating.value;
  for(var i=1; i<=5; i++){
    col = "color"+i;
    if(i<=rating){
      document.getElementById('s'+i).innerHTML="★";
      document.getElementById('s'+i).style.color=eval(col);
    }
    if(i>rating) document.getElementById('s'+i).innerHTML="☆";
  }
}

function starSelection(starID){
  var starNo = starID.charAt(1);
  document.MyReview.rating.value = starNo;
  for(var i=6; i>0; i--){
    col = "color"+i;
    if(i<=starNo){
      document.getElementById('s'+i).innerHTML="★";
      document.getElementById('s'+i).style.color=eval(col);
    }
    if(i>rating) document.getElementById('s'+i).innerHTML="☆";
  }
}

[geetar251]

j-kizzle, thanks for sharing this. I'm going to modify it to work with multiple star rating bars thingies.

[Logic Ali]

Originally Posted by geetar251

j-kizzle, thanks for sharing this. I'm going to modify it to work with multiple star rating bars thingies.

What you need is a solution that doesn't use any global variables or eval or innerHTML or require you to write onmouseover or onmouseout or onclick, and requires the creation of only one span for each rating. Also it should be configurable for number of stars displayed and their colour, and should not be hard-coded to address a particular form element. Link