SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple JS CountDowns

    Hey,

    I am trying to add more than 1 JS count down timers on 1 page
    I have the following HTML and JS below which works fine for the 1st countdown timer on the page however the second timer does work.

    I get JS error - Error: cd is not a function

    Can anyone help cheers


    Code HTML4Strict:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
    <head>
    	<title>New document</title>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    </head>
    <script type="text/javascript">
    function cd(compId, inputMins, inputSeconds, redirect)
    {
    	if(!redirect)
    	{
    		var redirect = 0;
    	}
     
    	inputSeconds ++;
     	mins = 1 * m(inputMins); // change minutes here
     	secs = 0 + s(":"+inputSeconds); // change seconds here (always add an additional second to your total)
     	redo(compId, inputMins, inputSeconds, redirect);
    }
     
    function m(obj) {
     	for(var i = 0; i < obj.length; i++) {
      		if(obj.substring(i, i + 1) == ":")
      		break;
     	}
     	return(obj.substring(0, i));
    }
     
    function s(obj) {
     	for(var i = 0; i < obj.length; i++) {
      		if(obj.substring(i, i + 1) == ":")
      		break;
     	}
     	return(obj.substring(i + 1, obj.length));
    }
     
    function dis(mins,secs) {
     	var disp;
     	if(mins <= 9) {
      		disp = " 0";
     	} else {
      		disp = " ";
     	}
     	disp += mins + "m ";
     	if(secs <= 9) {
      		disp += "0" + secs+ "s";
     	} else {
      		disp += secs + "s";
     	}
     	return(disp);
    }
     
    function redo(compId, mins, secs,redirect) {
     
    	secs--;
     	if(secs == -1) {
      		secs = 59;
      		mins--;
     	}
     
     	var comp = 'clock'+compId;
     	document.getElementById(comp).innerHTML = dis(mins,secs);
     
     	//document.cd.disp.value = dis(mins,secs); // setup additional displays here.
     	if((mins == 0) && (secs == 0))
     	{
      		if (redirect == 1)
      		{
      			window.location.reload()
      		}
      		else
      		{
      			document.getElementById(comp).innerHTML = 'Competiton Now Closed';
      		}
     
     	}
     	else
     	{
     		cd = setTimeout(function(){redo(compId,mins, secs, redirect)},1000);
     	}
    }
    </script>
    <body>
    Timer 1: <span id="clock1"></span><br/><br/>
    <script type="text/javascript">
    	cd('1','10','45')
    </script>
    Timer 2: <span id="clock2"></span>
    <script type="text/javascript">
    	cd('2','5','20')
    </script>
    </body>
    </html>

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that if each timer is not properly namspaced, then the invoked functions will interfere with each other. For your first timer you should do something like timer1 = new cd('1', '20', '45') and for tbe second timer2 = new cd('2', '5', '20')


Bookmarks

Posting Permissions

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