Question

okay so im having trouble getting this countdown to run , i provide the date-time for jquery Date() to a function and i want it to run every second but for some strange reason im throwing undefined error. *note this is a 100% dynamic there could be 1 countdown on the page or 1000 for every user .

HTML MARKUP:

    <li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 1</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 2</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
<li class="clu">
    <legend>Clutch # 3</legend>
    <ul class='clutch-des'>
        <li class='it-d'>2012-05-12 23:55:59</li>
        <li class='it'>Remaining: <span class="timeremaining" id="dlvdfovwdfivwsf">
            <span class="hours">03</span>
            <span class="mins">09</span>
            <span class="sec">55</span>
            </span>
        </li>

     </ul>
</li>
​

JQUERY :

  var a = new Array(); var i = 0;
$('.timeremaining').each(function(index , el){
    var ID = $(this).attr('id');
    // get due date for countdown
    var dd = $(this).parent().parent().children('.it-d').text().split('Due :'); var dd = dd[1];
    var kids = $(this).children();
    $(kids).each(function(){
    a[i] = $(this).attr('class');
    i++;
    });

    Cdtd(x,a[0],a[1],a[2],ID);
});    
function Cdtd(x,hrd,md,sd,ID){

    var dd = new Date(x);
    var now = new Date();
    var dif = dd.getTime() - now.getTime() ;
    if(dif <= 0){
        clearTimeout(CountDown);
        alert('Clutch done!');
    }
    var sec = Math.floor(dif / 1000);
    var min = Math.floor(sec / 60);
    var hr = Math.floor(min / 60);
    var day = Math.floor(hr / 24);
    min %= 60;
    sec %= 60; 
    hr  %= 24;
    $('#'+ID+' '+sd).text (sec+ 'secs');
    $('#'+ID+' '+md).text (min+ 'mins');
    $('#'+ID+' '+hrd).text(hr+  'hrs' );
    var CountDown = setInterval('Cdtd(x,hrd,md,sd)',1000);

}
​

Answer 1

I finally got your code working here, with a few modifications. Also, remember to never use the same ID for an element; they need to each be unique.