www.webdeveloper.com
Results 1 to 6 of 6

Thread: Quick Scoreboard Script

  1. #1
    Join Date
    Oct 2008
    Posts
    2

    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>
    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>

  2. #2
    Join Date
    Apr 2008
    Posts
    26
    what do you mean by multiple scores? do you want multiple scoreboards, or just the ability to change the score being viewed?
    Last edited by Zaphod42; 10-05-2008 at 07:07 PM.

  3. #3
    Join Date
    Oct 2008
    Posts
    2
    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>
    Every time I try and modify the function to work with two different sets of scores, I can't seem to get it working.

  4. #4
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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.

    HTML Code:
    <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>
    here, the _score 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.

  5. #5
    Join Date
    Dec 2011
    Posts
    1

    Score board Script

    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!

  6. #6
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

    HTML Code:
    <!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>
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles