Question

I have to create a countdown timer for a bidding website. The timer works properly when I put it outside of the while loop. However, id does not work inside the loop. What am I doing wrong? Here is my code:

<script>
var before=""
var current="ended"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d,id){
theyear=yr;themonth=m;theday=d
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[m-1]+" "+d+", "+yr
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
if(dday==0&&dhour==0&&dmin==0&&dsec==0){
document.getElementById(id).value=current
return
}
else
document.getElementById(id).value="Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left "+before
setTimeout("countdown(theyear,themonth,theday,id)",1000)
}
</script>
<?php 
include('../connection.php');
    $rs = mysql_query("select * from datepic") or die(mysql_error());

    if(mysql_num_rows($rs)){

        while($row = mysql_fetch_array($rs))
        {
            $date = str_replace('-',',',$row['date']);

            echo '<input type="text" id="'.$row['id'].'" size=80>';
            ?>
            <script>
                countdown(<?php echo $date.','.$row['id'];?>)

            </script>


            <?php           

        }
    }

?>

Answer 1

change setTimeout with this:

setTimeout(function(){countdown(theyear,themonth,theday,id);},1000)

you can make your function to jQuery function like that:

jQuery.fn.countdown = function(yr,m,d){
   $that = $(this);
   theyear=yr;themonth=m;theday=d
   var today=new Date()
   var todayy=today.getYear()
   if (todayy < 1000)
      todayy+=1900
   var todaym=today.getMonth()
   var todayd=today.getDate()
   var todayh=today.getHours()
   var todaymin=today.getMinutes()
   var todaysec=today.getSeconds()
   var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
   futurestring=montharray[m-1]+" "+d+", "+yr
   dd=Date.parse(futurestring)-Date.parse(todaystring)
   dday=Math.floor(dd/(60*60*1000*24)*1)
   dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
   dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
   dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
   if(dday==0 && dhour==0 && dmin==0 && dsec==0){
      $that.val(current);
      return
   }
   else
     $that.val("Only "+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds   left "+before);
 setTimeout(function(){ $that.countdown(theyear,themonth,theday);},1000)
}

<?php 
include('../connection.php');
    $rs = mysql_query("select * from datepic") or die(mysql_error());

    if(mysql_num_rows($rs)){

        while($row = mysql_fetch_array($rs))
        {
            $date = str_replace('-',',',$row['date']);

            echo '<input type="text" id="'.$row['id'].'" size=80>';
            ?>
            <script>
                $("?php echo $row['id'] ?>").countdown(<?php echo $date?>);

            </script>


            <?php           

        }
    }

?>