Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts

    two stopwatch scripts on a page

    Hi.

    I have a stopwatch script called from this <form>:

    <form name="sw">
    <input type="text" name="beg2" size="6" value=" 4:00
    <input type="button" value="Start" onclick="Down();">
    <input type="button" value="Stop" onclick="Stop();">
    <input type="button" value="Reset" onclick="Reset();">
    </form>

    I need more than one on the same page. How can I do this? I tried various things but they all failed. I'd like to study the answer so I can do it myself later.

    Here is the script:

    *******************************

    <!-- Begin
    var down;
    var min1,sec1;
    var cmin1,csec1,cmin2,csec2;

    function Minutes(data)
    {

    for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":")
    break;

    return(data.substring(0,i));
    }

    function Seconds(data)
    {
    for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":")
    break;

    return(data.substring(i+1,data.length));
    }

    function Display(min,sec)
    {
    var disp;

    if (min<=9)
    disp=" 0";
    else
    disp=" ";

    disp+=min+":";

    if (sec<=9)
    disp+="0"+sec;
    else
    disp+=sec;

    return(disp);
    }

    function Down()
    {
    cmin2=1*Minutes(document.sw.beg2.value);

    csec2=0+Seconds(document.sw.beg2.value);

    DownRepeat();
    }

    function DownRepeat()
    {
    if((cmin2==0)&&(csec2==0))
    alert("Countdown Stopped");
    else
    {
    csec2--;
    if(csec2==-1)
    {
    csec2=59; cmin2--;
    }

    document.sw.beg2.value=Display(cmin2,csec2);
    down=setTimeout("DownRepeat()",1000);
    }
    }

    function Stop()
    {
    clearTimeout(down);
    }

    function Reset()
    {
    clearTimeout(down);
    document.sw.beg2.value = ' 20:00';
    }
    // End -->

    Thanks,

    Terry

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This question has been asked and answered many times before.

    See http://www.javascriptkit.com/javatut...iplejava.shtml

    In short, you must make sure that your functions and all your variables
    have different names. The simplest way is to name the functions Minutes1(), Minutes2() etc.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    The best way is to re-write the script to make it object-oriented so that multiple instances can be created.

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I am perplexed.

    Can you show me a section of this redone, so I can follow the logic and apply it to the rest?

    Of course, I understand if you have no time for this.

    It must have something to do with beg() in the function, and beg(1), beg(2) in the html code, but everything I tried failed.

    Best,

    Terry

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    Hi. I have managed to make three stopwatches on the same page work, with one remaining problem:

    If I hit START twice, I get an error. This didn't happen in the original code for one stopwatch. I can't see why this happens.

    Does anyone have a way of preventing this error occurring?

    Here is the new script: (not very elegant, I know)

    *******************************

    <HTML>

    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var disp1,disp2,disp3;
    var down1,down2,down3;
    var cmin1,csec1,cmin2,csec2,cmin3,csec3;

    function Minutes(data)
    {
    for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":")
    break;
    return(data.substring(0,i));
    }

    function Seconds(data)
    {
    for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":")
    break;
    return(data.substring(i+1,data.length));
    }

    function Display1(min,sec)
    {
    var disp1;
    if (min<=9)
    disp1=" 0";
    else
    disp1=" ";
    disp1+=min+":";
    if (sec<=9)
    disp1+="0"+sec;
    else
    disp1+=sec;
    return(disp1);
    }


    function Display2(min,sec)
    {
    var disp2;
    if (min<=9)
    disp2=" 0";
    else
    disp2=" ";
    disp2+=min+":";
    if (sec<=9)
    disp2+="0"+sec;
    else
    disp2+=sec;
    return(disp2);
    }

    function Display3(min,sec)
    {
    var disp3;
    if (min<=9)
    disp3=" 0";
    else
    disp3=" ";
    disp3+=min+":";
    if (sec<=9)
    disp3+="0"+sec;
    else
    disp3+=sec;
    return(disp3);
    }

    function down1() {
    cmin1=1*Minutes(document.sw.disp1.value);
    csec1=0+Seconds(document.sw.disp1.value);
    down1Repeat();
    }
    function down1Repeat() {
    csec1--;
    if(csec1==-1) {
    csec1=59; cmin1--;
    }
    document.sw.disp1.value=Display1(cmin1,csec1);
    if((cmin1==0)&&(csec1==0));
    else down1=setTimeout("down1Repeat()",1000);
    }

    function down2() {
    cmin2=1*Minutes(document.sw.disp2.value);
    csec2=0+Seconds(document.sw.disp2.value);
    down2Repeat();
    }
    function down2Repeat() {
    csec2--;
    if(csec2==-1) {
    csec2=59; cmin2--;
    }
    document.sw.disp2.value=Display2(cmin2,csec2);
    if((cmin2==0)&&(csec2==0));
    else down2=setTimeout("down2Repeat()",1000);
    }

    function down3() {
    cmin3=1*Minutes(document.sw.disp3.value);
    csec3=0+Seconds(document.sw.disp3.value);
    down3Repeat();
    }
    function down3Repeat() {
    csec3--;
    if(csec3==-1) {
    csec3=59; cmin3--;
    }
    document.sw.disp3.value=Display3(cmin3,csec3);
    if((cmin3==0)&&(csec3==0));
    else down3=setTimeout("down3Repeat()",1000);
    }

    function stop1()
    {
    clearTimeout(down1);
    }

    function reset1()
    {
    clearTimeout(down1);
    document.sw.disp1.value = ' 5:00';
    }

    function stop2()
    {
    clearTimeout(down2);
    }

    function reset2()
    {
    clearTimeout(down2);
    document.sw.disp2.value = ' 5:00';
    }

    function stop3()
    {
    clearTimeout(down3);
    }

    function reset3()
    {
    clearTimeout(down3);
    document.sw.disp3.value = ' 5:00';
    }
    // End -->
    </SCRIPT>
    <BODY>

    <FORM name="sw">
    <input type="text" name="disp1" size="6" value=" 5:00">
    <input type="button" value="Start" onclick="down1()">
    <input type="button" value="Stop" size="6" class="Format3" onclick="stop1();">
    <input type="button" value="Reset" size="6" class="Format3" onclick="reset1();"><p>

    <input type="text" name="disp2" size="6" value=" 5:00">
    <input type="button" value="Start" onclick="down2()">
    <input type="button" value="Stop" size="6" class="Format3" onclick="stop2();">
    <input type="button" value="Reset" size="6" class="Format3" onclick="reset2();"></p>
    <p>

    <input type="text" name="disp3" size="6" value=" 5:00">
    <input type="button" value="Start" onclick="down3()">
    <input type="button" value="Stop" size="6" class="Format3" onclick="stop3();">
    <input type="button" value="Reset" size="6" class="Format3" onclick="reset3();"></p>
    </FORM>

    </BODY>

    </HTML>

    ************************************

    Thanks

    Terry

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Thought I answered this, maybe on another forum

    anyway see

    http://www.vicsjavascripts.org.uk/Pl...aywithTime.htm

    the second script


  •  

    Posting Permissions

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