Very simple question in Javascript, please

Question

Q8iEnG 0 Junior Poster

15 Years Ago

Hi mates..

I would like to ask you small question and I do really appreciate if you helped me out.

I want to make a VERY SIMPLE "Poll" using Javascript

here's my code, below it I'll tell you what I'm stuck at:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<script type="text/javascript">

function add()
{
var countR1 = 0;
var countR2 = 0;
var countR3 = 0;

if( document.vote.R1.value == "1st" )
{
countR1++;
}

else if( document.vote.R1.value == "2nd" )
{
countR2++;
}

else if( document.vote.R1.value == "3rd" )
{
countR3++;
}

window.alert("شكرا لتصويتك" + countR1);
//else if( document.vote.B1.onclick )
//{
//window.alert("رائعة: " + countR1 + "\nممتازة: " + countR2 + "\nضعيفة: " + countR3 );
//}

}

</script>

<style type="text/css">
.style2 {
	text-align: center;
}
.style3 {
	font-family: Tahoma;
}
</style>

</head>

<body>
<form method="post" name="vote" onsubmit="add()">
	<div class="style2">
		<span class="style3">نظام تصويت<br />
		<br />
		ما رأيك بالجافاسكريبت؟<br />
		<input name="R1" value="1st" type="radio" />رائعة<br />
		<input name="R1" value="2nd" type="radio" />ممتازه<br />
		<input name="R1" value="3rd" type="radio" />ضعيفة<br />
		</span><input name="Submit1" type="submit" value="vote" /></div>
</form>
<form method="post" action="">
<input name="B1" type="button" value="how many votes!" />
</form>

</body>

</html>

The problem that faces me is that I want when click on "how many votes!" the button.

it'll display an "alert" message with the values of each "counter" that they are exist in the add() function.

How to make it?

Also, please try yourself I guess when I choose one choice and clicked on "Vote" the counter does not increment, and why is that happens to me!!!

Thanks ^^

javascript

2 Contributors
7 Replies
333 Views
5 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Here you are Q8iEnG, I think this is what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Airshow :: Simple javascript voting system</title>
<!-- Q8iEnG : http://www.daniweb.com/forums/thread200035.html -->
<style type="text/css">
* { font-family:verdana,arial; }
#polling_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	border:1px solid #cabf02;
	color:#cabf02;
	background-color:#f9f6ef;
	text-align:center;
}
#polling_station h1{
	padding:3px;
	color:#f9f6ef;
	background-color:#cabf02;
}
#counting_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	border:1px solid #02aa6f;
	color:#02aa6f;
	background-color:#eff9e6;
	text-align:center;
}
#counting_station h1{
	padding:3px;
	color:#eff9e6;
	background-color:#02aa6f;
}
ul {
	margin:0 0 20px -25px;
	list-style-type: none;
}
#message {
	margin:12px 0 0 0;
	font-size:10pt;
	height:2.5em; 
}
</style>

<script>
var results = [];

function resetResults(){
	var ballotCard = document.getElementById('ballotCard');
	if(ballotCard){
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var option = list[i].firstChild;
			results[i] = { candidate:option.value, votes:0 };
		}
		displayResults('results', true);
	}
}
function castVote(){
	var ballotCard = document.getElementById('ballotCard');
	if(ballotCard){
		var message = 'No vote cast.<br />Please select a candidate then click "Vote" again';
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var option = list[i].firstChild;
			if(!results[i]) { results[i] = { candidate:option.value, votes:0 } };
			if(option.checked){
				results[i].votes++;
				option.checked = 0;
				message = 'Vote successfully cast. Thank you.';
			}
		}
		displayMessage(message)
		var auto = document.getElementById('auto');
		if(auto && auto.checked) { displayResults('results'); }
		else { displayResults('results', true); }
	}
}
function displayResults(containerId, blankIt){
	var fragment = document.createDocumentFragment();
	for(var i=0; i<results.length; i++){
		var li = document.createElement('li');
		var txt = (blankIt) ? '' : (results[i].candidate + ' : ' + results[i].votes)
		var txtNode = document.createTextNode(txt);
		li.appendChild(txtNode);
		fragment.appendChild(li);
	}
	var cont = document.getElementById(containerId);
	cont.innerHTML = '';
	cont.appendChild(fragment);
}
function displayMessage(message){
	var m = document.getElementById('message');
	if(m) { m.innerHTML = message; }
	else{ alert(message); }
}
onload = function(){
	resetResults();
}
</script>
</head>

<body>
<div id="polling_station">
	<h1>Polling Station</h1>
	<ul id="ballotCard">
		<li><input id="r1" type="radio" name="R1" value="Candidate 1" /><label for="r1">Candidate 1</label></li>
		<li><input id="r2" type="radio" name="R1" value="Candidate 2" /><label for="r2">Candidate 2</label></li>
		<li><input id="r3" type="radio" name="R1" value="Candidate 3" /><label for="r3">Candidate 3</label></li>
	</ul>
	<input type="button" value="Vote" onclick="castVote()" />
	<div id="message">&nbsp;</div>
</div>


<div id="counting_station">
<h1>Counting Station</h1>
<ul id="results"></ul>
<input type="button" value="Show me" onclick="displayResults('results');"/>&nbsp;
<input id="auto" type="checkbox" />&nbsp;Auto

</body>
</html>

Airshow

Q8iEnG commented: Thank you so much +1

Airshow 416 WiFi Lounge Lizard

15 Years Ago

Q8iEnG,

You were nearly there but like all things HTML/javascript, there are always a few things to fix.

Code below is a fixed version of yours. Fixes are essentially
1. Return false from add() and from where add() is called in the anonynous "onclick" function.
2. document.votes.R1 returns an array of radio buttons in group R1 and you have to loop to discover which one is currently checked. This fools most people including me if I've been away for a while.
3. It would be much simpler to make countR1 etc an array, however the syntax window['countR'+i]++ addresses the discrete variables directly. I renamed countR1/2/3 as countR0/1/2 to make this simpler.
4. I separated out your results alert into a separate function showResults() and added and action to the "how many votes!" button via its form onsubmit. As before, we returnm false (twice in cascade).
5. The forms never get submitted so most "name" attributes were unnecessary. I stripped out all unnecessary attributes.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<style type="text/css">
.style2 {
	text-align: center;
}
.style3 {
	font-family: Tahoma;
}
</style>
<script type="text/javascript">
var countR0 = 0;
var countR1 = 0;
var countR2 = 0;
function add(){
	var choices = document.vote.R1;
	for(var i=0; i<choices.length; i++){
		if(choices[i].checked) { window['countR'+i]++; }
	}
	return false;
}
function showResults(){
	window.alert( "Candidate 1: " + countR0 + "\nCandidate 2: " + countR1 + "\nCandidate 3: " + countR2 );
	return false;
}
</script>
</head>

<body>
<form name="vote" onsubmit="return add()">
	<div class="style2">
		<span class="style3">Vote here<br />
		<br />
		Choices<br />
		<input name="R1" type="radio" />Candidate 1<br />
		<input name="R1" type="radio" />Candidate 2<br />
		<input name="R1" type="radio" />Candidate 3<br />
		</span>
		<input name="Submit1" type="submit" value="Vote" />
	</div>
</form>
<form onsubmit="return showResults();">
	<input type="submit" value="how many votes!" />
</form>

</body>
</html>

Please do send a privte message. I'll help if I can.

Airshow

Q8iEnG commented: Thank you so much +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-06-27T18:19:58+00:00

Q8iEnG,

You will find that developing a voting system is significantly more complex than you think.

The majority of the work needs to be performed server-side in a language such as PHP with a database to store the votes.

A voting system built entirely in javascript would be very limited as it could only ever gather votes from each client computer independently. There would be no central repository for votes cast at different client computers.

As it stands, neither your HTML nor your javascript indicates any sort of communication with a server.

I suggest you Google something like "php polling system" or "php voting system" to find some ready-developed code.

That will at least give you an idea of the complexity involved.

Airshow

Q8iEnG 0 Junior Poster · Answer 2 · 2009-06-27T18:39:54+00:00

Q8iEnG,
You will find that developing a voting system is significantly more complex than you think.
The majority of the work needs to be performed server-side in a language such as PHP with a database to store the votes.
A voting system built entirely in javascript would be very limited as it could only ever gather votes from each client computer independently. There would be no central repository for votes cast at different client computers.
As it stands, neither your HTML nor your javascript indicates any sort of communication with a server.
I suggest you Google something like "php polling system" or "php voting system" to find some ready-developed code.
That will at least give you an idea of the complexity involved.
Airshow

Thank you for your concern and reply.

I know about php, html, cgi, aspx...etc

I'm a programmer tho.

But, as I said I want to make a VERY SIMPLE javascript code to act as a "Poll"

a counter that counts if you clicked on any choice, and when you click on "How many votes" it'll tell you that there's one voted in that choice.

Very simple, I just want it for a tutorial to show my ppl how javascript works that's all.

So, please if you can help me out! would be appreciated.

I want for example when you choose one of the choices and you click on "Vote" it'll said "Thanks for your vote".

When you click on "How many votes!", it'll show you that "1" who is voted on that choice "whatever you voted for".

That's it.

Q8iEnG 0 Junior Poster · Answer 3 · 2009-06-29T23:58:59+00:00

Here you are Q8iEnG, I think this is what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Airshow :: Simple javascript voting system</title>
<!-- Q8iEnG : http://www.daniweb.com/forums/thread200035.html -->
<style type="text/css">
* { font-family:verdana,arial; }
#polling_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	border:1px solid #cabf02;
	color:#cabf02;
	background-color:#f9f6ef;
	text-align:center;
}
#polling_station h1{
	padding:3px;
	color:#f9f6ef;
	background-color:#cabf02;
}
#counting_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	border:1px solid #02aa6f;
	color:#02aa6f;
	background-color:#eff9e6;
	text-align:center;
}
#counting_station h1{
	padding:3px;
	color:#eff9e6;
	background-color:#02aa6f;
}
ul {
	margin:0 0 20px -25px;
	list-style-type: none;
}
#message {
	margin:12px 0 0 0;
	font-size:10pt;
	height:2.5em; 
}
</style>

<script>
var results = [];

function resetResults(){
	var ballotCard = document.getElementById('ballotCard');
	if(ballotCard){
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var option = list[i].firstChild;
			results[i] = { candidate:option.value, votes:0 };
		}
		displayResults('results', true);
	}
}
function castVote(){
	var ballotCard = document.getElementById('ballotCard');
	if(ballotCard){
		var message = 'No vote cast.<br />Please select a candidate then click "Vote" again';
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var option = list[i].firstChild;
			if(!results[i]) { results[i] = { candidate:option.value, votes:0 } };
			if(option.checked){
				results[i].votes++;
				option.checked = 0;
				message = 'Vote successfully cast. Thank you.';
			}
		}
		displayMessage(message)
		var auto = document.getElementById('auto');
		if(auto && auto.checked) { displayResults('results'); }
		else { displayResults('results', true); }
	}
}
function displayResults(containerId, blankIt){
	var fragment = document.createDocumentFragment();
	for(var i=0; i<results.length; i++){
		var li = document.createElement('li');
		var txt = (blankIt) ? '' : (results[i].candidate + ' : ' + results[i].votes)
		var txtNode = document.createTextNode(txt);
		li.appendChild(txtNode);
		fragment.appendChild(li);
	}
	var cont = document.getElementById(containerId);
	cont.innerHTML = '';
	cont.appendChild(fragment);
}
function displayMessage(message){
	var m = document.getElementById('message');
	if(m) { m.innerHTML = message; }
	else{ alert(message); }
}
onload = function(){
	resetResults();
}
</script>
</head>

<body>
<div id="polling_station">
	<h1>Polling Station</h1>
	<ul id="ballotCard">
		<li><input id="r1" type="radio" name="R1" value="Candidate 1" /><label for="r1">Candidate 1</label></li>
		<li><input id="r2" type="radio" name="R1" value="Candidate 2" /><label for="r2">Candidate 2</label></li>
		<li><input id="r3" type="radio" name="R1" value="Candidate 3" /><label for="r3">Candidate 3</label></li>
	</ul>
	<input type="button" value="Vote" onclick="castVote()" />
	<div id="message">&nbsp;</div>
</div>


<div id="counting_station">
<h1>Counting Station</h1>
<ul id="results"></ul>
<input type="button" value="Show me" onclick="displayResults('results');"/>&nbsp;
<input id="auto" type="checkbox" />&nbsp;Auto

</body>
</html>

Airshow

WOW awesome, thanks a lot that's totally what I was looking for.

I will study it well, and if you don't mind once I faced a hard part I'll PM you if that's ok ^^

umm, can you tell me what was wrong in my first code? it should work with very simple code, but I don't know where is the mistake in the first code I posted!?

Thanks, would be appreciated if you tell me ^^

Q8iEnG 0 Junior Poster · Answer 4 · 2009-07-02T01:34:09+00:00

Q8iEnG,
You were nearly there but like all things HTML/javascript, there are always a few things to fix.
Code below is a fixed version of yours. Fixes are essentially
1. Return false from add() and from where add() is called in the anonynous "onclick" function.
2. document.votes.R1 returns an array of radio buttons in group R1 and you have to loop to discover which one is currently checked. This fools most people including me if I've been away for a while.
3. It would be much simpler to make countR1 etc an array, however the syntax window['countR'+i]++ addresses the discrete variables directly. I renamed countR1/2/3 as countR0/1/2 to make this simpler.
4. I separated out your results alert into a separate function showResults() and added and action to the "how many votes!" button via its form onsubmit. As before, we returnm false (twice in cascade).
5. The forms never get submitted so most "name" attributes were unnecessary. I stripped out all unnecessary attributes.
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 2</title>
<style type="text/css">
.style2 {
	text-align: center;
}
.style3 {
	font-family: Tahoma;
}
</style>
<script type="text/javascript">
var countR0 = 0;
var countR1 = 0;
var countR2 = 0;
function add(){
	var choices = document.vote.R1;
	for(var i=0; i<choices.length; i++){
		if(choices[i].checked) { window['countR'+i]++; }
	}
	return false;
}
function showResults(){
	window.alert( "Candidate 1: " + countR0 + "\nCandidate 2: " + countR1 + "\nCandidate 3: " + countR2 );
	return false;
}
</script>
</head>

<body>
<form name="vote" onsubmit="return add()">
	<div class="style2">
		<span class="style3">Vote here<br />
		<br />
		Choices<br />
		<input name="R1" type="radio" />Candidate 1<br />
		<input name="R1" type="radio" />Candidate 2<br />
		<input name="R1" type="radio" />Candidate 3<br />
		</span>
		<input name="Submit1" type="submit" value="Vote" />
	</div>
</form>
<form onsubmit="return showResults();">
	<input type="submit" value="how many votes!" />
</form>

</body>
</html>
Please do send a privte message. I'll help if I can.
Airshow

Thank you so much mate, I really feel shy for this generous.

Would check the code and see my mistakes.

Thanks again mate..

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 5 · 2009-07-02T09:20:52+00:00

Q8iEnG,

This little application of your has become quite absorbing. It's a very good one for demonstraing JavaScript coding patterns and user event handling.

Below is a version where I have refactored the code into a namespace pattern and now attach event handlers progammatically rather than in the HTML (which is generally considered bad practice these days).

The code is not simple but is about as concise as I can make it without resorting to the use of a library such as Jquery|Prototype etc.

The bit that might really interest you is a "localisation" feature by which the user can select from a list of available languages and the interface adapts accordingly. I've seeded the code with English and French (probably bad French) and provided the structure for Arabic but without any content (my knowledge of Arabic is shamefully lacking). You will need to enter translations of my English in the arabic language block. I am sure you will see how it works.

You may need to adjust the document's charset to make all three languaes display properly. Below, it is set to utf-8 which should be good for Arabic characters. You undoubtedly know more about this than I do.

Anyway, enough words, here's the code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /-->
<!--meta http-equiv="Content-Type" content="text/html; charset=iso-8859-6" /-->
<!--meta http-equiv="Content-Type" content="text/html; charset=windows-1257" /-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Airshow :: Javascript voting system</title>
<style type="text/css">
* { font-family:verdana,arial; }
#polling_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	color:#cabf02;
	background-color:#f9f6ef;
	border:1px solid #cabf02;
	text-align:center;
}
#polling_station h1{
	margin:0 0 12px 0;
	padding:3px;
	color:#f9f6ef;
	background-color:#cabf02;
	font-size:18pt;
}
#counting_station {
	margin:0 0 12px 0;
	padding:5px;
	width:350px;
	color:#0b9806;
	background-color:#eff9e6;
	border:1px solid #0b9806;
	text-align:center;
}
#counting_station h1 {
	margin:0 0 12px 0;
	padding:3px;
	color:#eff9e6;
	background-color:#0b9806;
	font-size:18pt;
}
#counting_station div#results {
	margin:0 0 12px 0;
}
#counting_station table, .results table {
	visibility:hidden;
}
#counting_station td, .results td {
	padding:3px;
	color:#eff9e6;
	background-color:#0b9806;
}
ul {
	position:relative;
	left: -60px;
	margin:0 0 20px 50%;
	list-style-type: none;
	text-align:left;
}
#message {
	margin:12px 0 0 0;
	font-size:10pt;
	height:2.5em;
}
</style>

<script>
// Utilities
var $ = Object.prototype.$ = function(id){ return (document.getElementById) ? document.getElementById(id) : document.all[id]; };

var VotingSystem = function(){
	var b_vote, b_reset, b_auto, b_auto_label, mess, lang, ballotCard, resultsContainer;
	var messages = [];
	messages['english'] = [];
	messages['english'][0]  = "";
	messages['english'][1]  = "Vote successfully cast. Thank you.";
	messages['english'][2]  = "No vote cast.<br />Please select a candidate then click \"Vote\" again";
	messages['english'][3]  = "Nullify all votes?";
	messages['english'][4]  = "'Results' container not found";
	messages['english'][5]  = "'BallotCard' not found";
	messages['english'][6]  = "Polling Station";
	messages['english'][7]  = "Counting Station";
	messages['english'][8]  = "Vote";
	messages['english'][9]  = "Reset";
	messages['english'][10] = "View";
	
	messages['french'] = [];
	messages['french'][0]  = "";
	messages['french'][1]  = "Son vote et donnée. Merci.";
	messages['french'][2]  = "Vote n'est pas donnée.<br />Choisez un candidate et cliquez encore \"Votez\"";
	messages['french'][3]  = "Annuler toutes votes?";
	messages['french'][4]  = "Récipient pur les résultats n'existe pas";
	messages['french'][5]  = "Tableau scrutin n'existe pas";
	messages['french'][6]  = "Bureau de Scrutin";
	messages['french'][7]  = "Bureau de compte";
	messages['french'][8]  = "Votez";
	messages['french'][9]  = "Annuler";
	messages['french'][10] = "Montrez";
	
	messages['arabic'] = [];
	messages['arabic'][0]  = "";
	messages['arabic'][1]  = "";
	messages['arabic'][2]  = "";
	messages['arabic'][3]  = "";
	messages['arabic'][4]  = "";
	messages['arabic'][5]  = "";
	messages['arabic'][6]  = "";
	messages['arabic'][7]  = "";
	messages['arabic'][8]  = "";
	messages['arabic'][9]  = "";
	messages['arabic'][10] = "";
	
	var results = [];
	results.show = function(){ this.leaderBoard.style.visibility = 'visible'; };
	results.hide = function(){ this.leaderBoard.style.visibility = 'hidden'; };
	results.reset = function(){ for(var i=0; i<this.length; i++){ this[i].reset(); } };
	var castVote = function(){
		if(!ballotCard) { alert(messages[lang][5]); }
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var option = list[i].firstChild;
			if(option.checked){
				results[i].addVote();
				option.checked = 0;
				mess.display(messages[lang][1]);
				return;
			}
		}
		mess.display(messages[lang][2]);
	};
	var reset = function(){
		b_auto.checked = true;
		results.show();
		if(confirm(messages[lang][3])){
			results.reset();
			setTimeout('VotingSystem.hideAfterReset()', 1000);
		}
		else { hideAfterReset(); }
	};
	var hideAfterReset = function(){
		if(b_auto.hiddenChecked){ return; }
		b_auto.checked = false;
		results.hide();
	};
	var createLeaderBoard = function(){
		if(!resultsContainer) { alert(messages[lang][4]); }
		if(!ballotCard) { alert(messages[lang][5]); }
		var table = document.createElement('table');
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		var list = ballotCard.childNodes;
		for(var i=0; i<list.length; i++){
			var tr = document.createElement('tr');
			td1 = document.createElement('td');
			td2 = document.createElement('td');
			tr.appendChild(td1);
			tr.appendChild(td2);
			tbody.appendChild(tr);
			var option = list[i].firstChild.nextSibling.innerHTML;
			results[i] = {
				votes : td2,
				reset : function(){this.votes.innerHTML = 0 },
				addVote : function(){this.votes.innerHTML = this.votes.innerHTML - 0 + 1 }
			};
			results[i].reset();
			td1.innerHTML = option;
		}
		resultsContainer.appendChild(table);
		return table;
	};
	setLanguage = function(l){
		lang = l;
		$('polling_station_title').innerHTML = messages[lang][6];
		$('counting_station_title').innerHTML = messages[lang][7];
		b_vote.value = messages[lang][8];
		b_reset.value = messages[lang][9];
		b_auto_label.innerHTML = messages[lang][10];
	};
	return{
		init : function(){
			// Get various elements by id
			mess = $('message');
			b_vote = $('b_vote');
			b_reset = $('b_reset');
			b_auto = $('b_auto');
			b_auto_label = $('b_auto_label');
			ballotCard = $('ballotCard');
			resultsContainer = $('results');
			var languageSelector = $('languageSelector');

			// Assign handlers
			mess.display = function(m){ this.innerHTML = m; };
			b_vote.onclick = function(){ castVote(); };
			b_reset.onclick = reset;
			b_auto.onmouseout =
				b_auto_label.onmouseout = function(){ if(!b_auto.checked)results.hide(); };
			b_auto.onmouseover =
				b_auto_label.onmouseover = function(){ results.show(); };
			b_auto.onclick = function(){ this.hiddenChecked = this.checked; }
			b_auto.onfocus = function(){ this.blur(); };

			// Assign and execute language handler
			languageSelector.onchange = function(){ setLanguage(this.options[this.selectedIndex].value); };
			languageSelector.onchange();
			
			// Create and hide leaderboard
			results.leaderBoard = createLeaderBoard();
			results.hide();
		},
		hideAfterReset : function(){  hideAfterReset(); }
	};
}();

onload = function(){
	VotingSystem.init();
}
</script>
</head>

<body>
<select id="languageSelector">
	<option value="arabic">Arabic</option>
	<option value="english" selected="1">English</option>
	<option value="french">French</option>
</select>

<div id="polling_station">
	<h1 id="polling_station_title">Polling Station</h1>
	<ul id="ballotCard">
		<li><input id="r1" type="radio" name="R1" /><label for="r1">Candi 1</label></li>
		<li><input id="r2" type="radio" name="R1" /><label for="r2">Candidate 2</label></li>
		<li><input id="r3" type="radio" name="R1" /><label for="r3">Candite 3</label></li>
		<li><input id="r4" type="radio" name="R1" /><label for="r4">Candi 4</label></li>
	</ul>
	<input id="b_vote" type="button" value="Vote" />
	<div id="message">&nbsp;</div>
</div>

<div id="counting_station">
<h1 id="counting_station_title">Counting Station</h1>
<div id="results"></div>
<input id="b_reset" type="button" value="Reset" />&nbsp;
<input id="b_auto" type="checkbox" /><label id="b_auto_label" for="b_auto">View</label>

</body>
</html>

Have fun with it.

Airshow