Validating Time Format with Regular Expression
<p>I have to create a combination stopwatch and countdown timer and validate the time format (00:00:00) of the countdown with a regular expression. I tried using var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/; but keeps coming up as invalid. Not sure if the regex code is wrong or I have it in the wrong place? Also supposed to be showing the event output in a div area below but everything's coming up as "undefined" so far. Totally confused and would appreciate any ideas. Thanks so much!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>   // start stopwatch function and declare variables
        var hundr = 10;
        var minutes = 0;
        var seconds = 0;
        var stopwatch = 0;

    // begin stopwatch
       function startStopwatch(){
       "use strict";
        stopwatch = setInterval('setUp()', 100); 
       }
          

    // function to show if the timer reaches 60 seconds, display an alert that says "Time up!" Otherwise, continue incrementing hundredths/seconds
    function setUp(){
    var setTime = document.getElementById('output');
        hundr+=10;
        if (hundr == 100) {
        seconds++;
        hundr = 0;
        }
        if (seconds == 60) {
        minutes++;
        seconds = 0;
        setTime.innerHTML = "Time up!";
        clearInterval(stopwatch);
        return;
}

        // if/else statement to display stopwatch - if number of seconds/minutes are less than 10, display a zero.
        if(seconds &lt; 10){
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
        } else {
        setTime.innerHTML = '0' + minutes + ':' + seconds + ':' + hundr;
        } 
        if(hundr &lt; 10) {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':0' + hundr;
       } else {
        setTime.innerHTML = '0' + minutes + ':0' + seconds + ':' + hundr;
    }}
       

    // start countdown function and declare variables
        var ms = 99;
        var mins = 0;
        var secs = 60;
        var countdown = 0;

    function startCountdown(){
        "use strict";        
        countdown = setInterval('incrTimer()', 10);
        }

    function incrTimer(){
        "use strict";

    var regMatch = document.getElementById("output").value;
    var regex = /^\d{0-2}:\d{0-2}:\d{0-2}$/;    
        if (regex.test(regMatch)) { 
           document.getElementById("debug").innerHTML = "valid";
        } else {
           document.getElementById("debug").innerHTML = "invalid - please check your code";
        }
        var setCountd = document.getElementById('output');
        ms--;
        if (ms == -1) {
        secs--;
        ms = 99;
        } 
        if(secs == -1){
        min--;
        secs = 59;
        setCountd.innerHTML = "Time up!";
        clearInterval(countdown);
        alert('Time up');
        return;
    }

        // if/else statement to display countdown - if number of seconds/minutes are less than 10, display a zero in front of number.
        if(secs &gt; 10){
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
        } 
        if(ms &lt; 10) {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':0' + ms;
       } else {
        setCountd.innerHTML = '0' + mins + ':' + secs + ':' + ms;
    }}

       // end function incrTimer()


function stopTimer() { // pauses the output for both the stopwatch and the countdown timer
    clearTimeout(stopwatch);
    clearTimeout(countdown);
    } // end function stopTimer()

function clearOutput() { // clear output and restore div area
            document.getElementById("output").innerHTML = "";
    } // end function clearOutput</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#output{
    width:300px;
    height:25px;
    background-color: #e4e3db;
    border:1px solid #c3c4bc;

}

span {
    padding: 5px 10px 5px 10px;
    background-color: #00FFFF;
}




h2 {
    font-family: Arial;
    color: #799b3d;
}

h4 {
    font-family: Arial;
    font-style: italic;
    color: #1f8da8;
}

#debug {
    border: 1px solid red;
    width: 620px;
    padding: 10px;
    font-size: small;
    color: blue;
    background-color: #FFFF99;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Final&lt;/title&gt;
 &lt;link rel="stylesheet" type="text/css" href="final.css"&gt;
        &lt;script type="text/javascript" src="take7.js"&gt;&lt;/script&gt;


&lt;/head&gt;

&lt;body&gt;
&lt;h2&gt;Stopwatch or Countdown Timer&lt;/h2&gt;
 &lt;div id="output" &gt;&lt;/div&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;


    &lt;span id="stopwatch_output" onclick="startStopwatch()"&gt;Stopwatch&lt;/span&gt;
    &lt;span id="countdown_output" onclick="startCountdown()"&gt;Countdown&lt;/span&gt;  
    &lt;span id="timerstop" onclick="stopTimer()"&gt;STOP&lt;/span&gt;
    &lt;span id="resettimer" onclick="clearOutput()"&gt;RESET&lt;/span&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;p&gt;&lt;span id="debugOnOff" style="visibility:visible"&gt;Debug on/off&lt;/span&gt;
       &lt;span id="hideDebug" style="visibility:visible"&gt;Hide Debug&lt;/span&gt;
&lt;div id="debug"&gt;&lt;p id="firstP"&gt;This space is reserved for event output information.&lt;/p&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>