CODEWITHSUNDEEP
javascriptphptimer
Stupid Dojo
Stupid Dojo

Reputation: 15

javascript countdown timer inside php loop not working

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.

Upvotes: 1

Views: 857

Answers (1)

tiomno
tiomno

Reputation: 2228

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>

Upvotes: 1

Related Questions