Help found sample vote script code

Can any body help me to found vote only javascripts code? no php
pixarksaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SAM1Commented:
See this code in action
http://www.geekpedia.com/Samples/Rate/stars.htm

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>

Open in new window

0
pixarksaAuthor Commented:
Thank you for your response but i want voting code with question and result votes
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
pixarksaAuthor Commented:
thanks alot leakim971 but how can i customize the result to my choices

:)
0
leakim971PluritechnicianCommented:
>how can i customize the result to my choices ?
Which one ?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Networking

From novice to tech pro — start learning today.