Click here to Skip to main content
15,867,994 members
Articles / Web Development / XHTML
Article

Simple Voting Control In JavaScript

Rate me:
Please Sign up or sign in to vote.
4.89/5 (24 votes)
12 Jun 2008BSD3 min read 90.7K   1.8K   46   13
A simple voting control In JavaScript.

Introduction

Using JavaScript and the DOM, we can create very powerful and easy to use controls. Many Web 2.0 sites have some type of voting tool. This article describes how to create and use a simplified voting control.

Using the code

The code is straightforward. You add the script to your page and create a new object. You will need a container to place your object in. I recommend that this be an empty DIV. Adding other things inside the DIV will cause failure. You will need to provide the maximum number of images you wish to display, and how many are selected by default. You will also need to provide labels for these choices.

JavaScript
<script type="text/javascript" src="jVote.js"></script>
<script type="text/javascript">
var v;
window.onload = function()
{
    v = new jVote('voteDiv', {max:5,min:3,click:doStuff, 
            labels:['Bad','Poor','Average','Good','Great']});
};

Constructor

You create a new vote object by calling its constructor

JavaScript
voteObject = new jVote(parentDiv, parameters);

Both parentDiv and parameters are required. parentDiv is the DIV you want to add the voting object to. parameters will contain the settings for you object, including the number of images, their labels, what to do when an image is clicked, etc. parameters can be the following:

  • max: The number of images to be displayed.
  • min: The number of images currently turned "on".
  • label: This is an array containing the values of the images. The size of the array should be the same as your max property.
  • click: A callback specifying what to do when an image is clicked. Two values are passed to this object, the mouse event and the label value of the image clicked.
JavaScript
//Example
function doStuff(mouseEvent, labelValue)
{
    alert('You clicked ' + labelValue);
    //You'll probably want to put some relevant code here, like an AJAX call
    //to update your database with the voting results that the user clicked.
    //That is outside the scope of the article.
}

Methods

Since this is a very simple and bare-bones implementation, we don't have a lot of available methods.

  • object.reset(integer): integer is optional. Sets the number of images currently 'on'. When called without the integer, the parameters.min value is used.
  • object.lock(): Locks the vote object from being toggled. The parameters.click function will no longer fire, and the images will no longer change.
  • object.unLock(): Unlocks the vote object.

Technique

The technique is really quite simple. First, we must create our constructor:

JavaScript
function jVote(parent, settings)
{
    this.locked = false;  //is locked flag
    this.images = []; //array containing our images
    this.settings = settings;  //an object containing our settings
    this.parent = parent; //our parent div
    this.init();  //our init call
}

Now that we have a constructor, we need to add methods to it, or it doesn't really do anything! Since we have called init() already, it would probably be a good idea to add it to the object. We do this via prototype.

JavaScript
jVote.prototype.init = function()
{
    var that = this;
    for(var i = 0, e = this.settings.max; i < e; i++)
    {
        var image = document.createElement('img');
        this.images[i] = image;
        image.value = this.settings.labels[i];
        image.alt = this.settings.labels[i];
        image.style.cursor = 'pointer';
        image.onmouseover = function()
        {
            if(that.locked)
            {
                return;
            }
            that.set(this);
        };
        image.onclick = function(evnt)
        {
            if(that.locked)
            {
                return;
            }
            var eEvent = evnt || window.event;
            if(that.settings.click)
            {
                that.settings.click(eEvent, this.value);
            }
        };
        document.getElementById(this.parent).appendChild(image);
    }
    this.set(this.images[this.settings.min-1]);
};

All we are doing is looping through the number of images specified in our parameters.max setting, creating an image using document.createElement('img'), and appending that image to the object.parent. We also set our onmouseover and onclick events for our images as well as add them to our object.images array.

OK, our images are added....now what? For each image, we set the onmouseover event to call object.set(image). Let's take a look at the set method:

JavaScript
jVote.prototype.set = function(domImage)
{
    domImage.src = 'star.png';
    var next = domImage.nextSibling;
    while(next)
    {
        next.off = true;
        next.src = 'dark_star.png';
        next = next.nextSibling;
    }
    var prev = domImage.previousSibling;
    while(prev)
    {
        prev.off = false;
        prev.src = 'star.png';
        prev = prev.previousSibling;
    }
};

This function/method is the real 'meat and potatoes' of the entire script. It takes an image as an argument. That image is set to the 'on' position, and all the images before that image are set to 'on', while all the images after it are set to 'off'. We use image.previousSibling and image.nextSibling to get the images before and after our target image. When we have no more older/younger brothers and sisters, the previous/nextSibling functions evaluate to null, breaking us out of our while loop.

Points of interest

When using the this keyword inside a closure, the scope of the variable changes. To avoid this, you want to set your this keyword to another variable to use exclusively in closures.

JavaScript
function Foo()
{
    var that = this;
    var newImage = document.createElement('img');
    newImage.click = function()
    {
        //this no longer is our Foo object, but the newImage object instead.
        //To reference our Foo object, use 'that'
    }
}

Compatibility

  • Firefox
  • Internet Explorer 7
  • Internet Explorer 6
  • Opera
  • Safari
  • Konqueror

History

  • Thursday, June 12, 2008 -- Uploaded article.

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 5 Pin
dental implant23-Jul-23 6:14
professionaldental implant23-Jul-23 6:14 
GeneralI want to use a rating in php site , Please help me to this Pin
Member 1309372929-Mar-17 19:56
Member 1309372929-Mar-17 19:56 
Questionvoting system can't open Pin
Member 102462862-Sep-13 7:39
Member 102462862-Sep-13 7:39 
QuestionHow To Pass Choosen Vote To Server Pin
Seyed Ahmad Mirzaee29-Aug-12 5:03
Seyed Ahmad Mirzaee29-Aug-12 5:03 
GeneralMy vote of 4 Pin
Debojyoti Majumder19-Apr-11 22:22
Debojyoti Majumder19-Apr-11 22:22 
GeneralCan't do it Pin
Jochen De Smet16-Dec-10 1:15
Jochen De Smet16-Dec-10 1:15 
GeneralExtended functionality Pin
s_stoqnov26-Feb-10 4:49
s_stoqnov26-Feb-10 4:49 
QuestionExample? Pin
Mattias Carlsson14-Jul-09 22:54
Mattias Carlsson14-Jul-09 22:54 
AnswerRe: Example? Pin
Helbrax15-Jul-09 2:42
Helbrax15-Jul-09 2:42 
GeneralI was thinking of making something like this. Pin
Rajib Ahmed17-Jun-08 5:21
Rajib Ahmed17-Jun-08 5:21 
GeneralRe: I was thinking of making something like this. Pin
Helbrax17-Jun-08 5:42
Helbrax17-Jun-08 5:42 
Generalgreate inovation Pin
Abhijit Jana12-Jun-08 5:30
professionalAbhijit Jana12-Jun-08 5:30 
GeneralRe: greate inovation Pin
gogsthecoder16-May-09 0:37
gogsthecoder16-May-09 0:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.