/    Sign up×
Community /Pin to ProfileBookmark

Quick Scoreboard Script

I’m trying to make a quick html scoreboard. I’ve got it working with a single score, but I’m at a loss as to how to make it work with multiple scores on the same page.

To count up, click on the second zero (ones column). To count down, click on the first zero (tens column).

Also, if I’m doing something entirely boneheaded, just let me know.

[CODE]
<style type=”text/css”>
/*<![CDATA[*/
<!–
a {text-decoration:none; font-size: 150pt}
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: blue;}
a:active {color: blue;}//–>
/*]]>*/
</style>

<script type=”text/javascript”>
//<![CDATA[
var x=0;

function up() {
++x;
y = x.toString();
if (y < 10) {
y = “0”+y;
}
document.getElementById(‘tens’).innerHTML = y.substr(0,1);
document.getElementById(‘ones’).innerHTML = y.substr(1);
}
function down() {
–x;
y = x.toString();
if (y < 10) {
y = “0”+y;
}
document.getElementById(‘tens’).innerHTML = y.substr(0,1);
document.getElementById(‘ones’).innerHTML = y.substr(1);
}
//]]>
</script>[/CODE]

I was calling the function via two links on the page:

[CODE]<a href=”#” id=”tens” onmousedown=”down()” name=”tens”>0</a><a href=”#” id=”ones” onmousedown=”up()” name=”ones”>0</a>
[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@Zaphod42Oct 05.2008 — what do you mean by multiple scores? do you want multiple scoreboards, or just the ability to change the score being viewed?
Copy linkTweet thisAlerts:
@jcarterauthorOct 05.2008 — I've already got the scores changing for the first set. What I'm trying to do now is have two sets of scores at the same time via the links. Something like this:

[CODE]<a href="#" id="team1-tens" onmousedown="down()" name="team1-tens">0</a><a href="#" id="team1-ones" onmousedown="up()" name="team1-ones">0</a>
<a href="#" id="team2-tens" onmousedown="down()" name="team2-tens">0</a><a href="#" id="team2-ones" onmousedown="up()" name="team2-ones">0</a>[/CODE]


Every time I try and modify the function to work with two different sets of scores, I can't seem to get it working.
Copy linkTweet thisAlerts:
@ZeroKilledOct 06.2008 — to make it work with multiple score you can't build the function to always refer to the same element, that is, function have to be dynamic. there are various way of doing it: you can pass parameters to function so it know which elements to update; you can also create a constructor so that each instance refer to a particular score (tried this approach but couldn't put it to work); and the last may seems weird, but it work, is the ability of clousure. the code i'm going to show use clousure extensively.

[code=html]
<style type="text/css">
/*<![CDATA[*/
<!--
span{text-decoration:none; font-size: 50pt; color:#36c;}
//-->
/*]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function _score(){
var x = 0;
var y = '';
var tens = document.createElement('span');
tens.appendChild(document.createTextNode('0'));
var ones = tens.cloneNode(true);
tens.onclick = function() {
--x;
y = x.toString();
if (y < 10)y = "0"+ y;
tens.innerHTML = y.substr(0,1);
ones.innerHTML = y.substr(1);
}
ones.onclick = function(){
++x;
y = x.toString();
if (y < 10) y = "0"+ y;
tens.innerHTML = y.substr(0,1);
ones.innerHTML = y.substr(1);
}
var score = document.createElement('span');
score.appendChild(tens); score.appendChild(ones);
return score;
}

window.onload = function(){
document.body.appendChild(_score());
document.body.appendChild(_score());
document.body.appendChild(_score());
}
//]]>
</script>
[/code]


here, the [b]_score[/b] function return an element that contain two others element which each of them have registered onclick event. in this sample, i have created three score and appended them in the body.
Copy linkTweet thisAlerts:
@CnazaireDec 23.2011 — Hello,

I am trying to use this script for my company website........ but i dont understand much about how it works....how does the script get the scores it needs and how do i get it to update.....and its not showing anything when i upload it! please help! Thank you!
Copy linkTweet thisAlerts:
@mayank23Dec 25.2011 — errrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Copy linkTweet thisAlerts:
@JunkMaleDec 25.2011 — I thought of a "Quick" score board and this is what I came up with and wonder if this will assist in giving you an idea on what direction to go in.

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Score Board</title>
<script type="text/javascript" language="javascript">
<!--
function getScore( teamname ){
doj = document.getElementById( teamname ).innerHTML;
return doj-0;
}

function updateScore( teamname, scoretotal ){
teamname = teamname || "hometeam";
doj = document.getElementById( teamname );
doj.innerHTML = (scoretotal<9?"0":"") + scoretotal;
}

function addScore( tname, pointsAwarded ){
theScore = getScore( tname.name );
switch( tname.value ){
case "+": theScore += pointsAwarded; break;
case "-": theScore -= pointsAwarded; break;
}
theScore = theScore < 0 ? 0 : theScore; // disable for negative scores!
updateScore( tname.name , theScore );
}

//-->
</script>

<style type="text/css">
<!--
body { background-color:#003366; color:#FFFFFF;}
.style1 {font-size: 300px; color:#FFCC00;}
-->
</style>
</head>

<body><form id="form1" name="scoreboard" method="post" action="javascript:;" onsubmit="return false;">
<div style="float:left;">
Add to Home Team score
<input name="hometeam" type="button" id="hometeamadd" value="+" onclick="addScore( this , document.forms.scoreboard.pointScore.selectedIndex);" />
<input name="hometeam" type="button" id="hometeamadd" value="-" onclick="addScore( this , document.forms.scoreboard.pointScore.selectedIndex);" />
Set Score to award

<select name="pointScore" >
<option value="0" selected >0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
</select>

<div class="style1" id="hometeam" style="width:150px;">00</div>
Add to Away Team score
<input name="awayteam" type="button" id="awwayteam" value="+" onclick="addScore( this , document.forms.scoreboard.pointScore.selectedIndex);" />
<input name="awayteam" type="button" id="awwayteam" value="-" onclick="addScore( this , document.forms.scoreboard.pointScore.selectedIndex);" />
<div class="style1" id="awayteam" style="width:150px;">00</div>
</div></form>
</body>
</html>[/code]


The idea is simple as adding specific named elements and buttons and using the generic functions to update the associated div from the buttons with that element.
×

Success!

Help @jcarter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...