javascript countdown timer inside php loop not working

Question

Hi I am trying to add multiple countdown timer through javascript but some how, its not working , Can any one tell me what I am doing wrong, I am a new bee.

below is by code:

php while loop {

    <script>
    var timer;

    var days= <?php echo $datediff ; ?>;     

    var compareDate = new Date();
    compareDate.setDate(compareDate.getDate() + <?php echo $datediff  ?> ); //just for this demo today + 7 days

    timer = setInterval(function() {
        timeBetweenDates(compareDate);
    }, 1000);

    function timeBetweenDates(toDate) {
        var dateEntered = toDate;
        var now = new Date();
        var difference = dateEntered.getTime() - now.getTime();

        if (difference <= 0) {
            // Timer done
            clearInterval(timer);
        } else {
            var seconds = Math.floor(difference / 1000);
            var minutes = Math.floor(seconds / 60);
            var hours = Math.floor(minutes / 60);
            var days = Math.floor(hours / 24);

            hours %= 24;
            minutes %= 60;
            seconds %= 60;

            $(".days") .text(days);
            $(".hours").text(hours);
            $(".minutes").text(minutes);
            $(".seconds").text(seconds);
       }    
    }
    </script>
    <div class="timer">
        <span class="days"></span>days
        <span class="hours"></span>hours
        <span class="minutes"></span>minutes
        <span class="seconds"></span>seconds
    </div>

I am not able to get the timer work have changed the id to class.

Hey, I tried and it worked for me. Did you check the console on the Developer Tools of your browser for any error? Show the full code here and I'll try to help you to figure out where the issue is. — tiomno
– tiomno, Commented Dec 28, 2016 at 6:04
Iam trying to work it inside a while loop here i fetch product info . — Stupid Dojo
– Stupid Dojo, Commented Dec 28, 2016 at 6:12

tiomno · Accepted Answer · 2016-12-28 07:13:45Z

1

If I got the idea correctly here you need to play with global and local variables here not to overwrite values of the global scope in every loop.

Check this code and let me know if it helps you out in some way.

<?php
$datediffs = [7, 8, 9, 10]; //let's say this is the array of results from the database
?>
<html>
<head>
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script>
    var timer = []
    var timestamp = new Date()

    function timeBetweenDates(toDate, key) {
        var now = new Date()
        var difference = toDate.getTime() - now.getTime()

        if ( difference <= 0 )
        {
            // Timer done
            clearInterval( timer[key] );
        }
        else
        {
            var seconds = Math.floor( difference / 1000 )
            var minutes = Math.floor( seconds / 60 )
            var hours = Math.floor( minutes / 60 )
            var days = Math.floor( hours / 24 )

            hours %= 24
            minutes %= 60
            seconds %= 60

            var $timer = $( '.timer-' + key )

            $timer.find( '.days' ).text( days )
            $timer.find( '.hours' ).text( hours )
            $timer.find( '.minutes' ).text( minutes )
            $timer.find( '.seconds' ).text( seconds )
        }
    }
</script>

<?php foreach ( $datediffs as $key => $datediff ) : ?>
    <script>
        timer.push( setInterval( function()
        {
            var compareDate = new Date()
            compareDate.setTime( timestamp.getTime() )
            compareDate.setDate( compareDate.getDate() + <?php echo $datediff  ?> )
            timeBetweenDates( compareDate, <?php echo $key; ?> )
        }, 1000) )
    </script>

    <div class="timer-<?php echo $key; ?>">
        <span class="days"></span> days
        <span class="hours"></span> hours
        <span class="minutes"></span> minutes
        <span class="seconds"></span> seconds
    </div>
<?php endforeach; ?>
</body>
</html>

answered Dec 28, 2016 at 7:13

tiomno

2,25730 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Stupid Dojo Over a year ago

can you replace for each loop with mysql while loop so it would be easy for me to understand ?

Stupid Dojo Over a year ago

while ($row = mysql_fetch_assoc($consulta)) { ?> $datediff= $_row['days' ] }

Stupid Dojo Over a year ago

ok i have two dates stored in db 1. 2017-12-27 ( closing date ) 2 2017-12-26( time stamp) now how do is start with

tiomno Over a year ago

To change foreach for while just change the line <?php foreach ( $datediffs as $key => $datediff ) : ?> to <?php while ($row = mysql_fetch_assoc($consulta)) : $datediff= $_row['days' ] ?> and the line <?php endforeach; ?> by <?php endwhile; ?>

tiomno Over a year ago

Sorry, I don't get the idea with the two dates stored in the DB, rephrase your comment please.

|

Collectives™ on Stack Overflow

javascript countdown timer inside php loop not working

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related