javascript timer countdown only last row from db

Question

Hi i add script inside loop it get proper data from db but it countdown date only from last row

session id and data from db

<?php
session_start();
require_once 'DB.class.php';
$db = new DB();

// Fetch the gallery data
$images = $db->getRows();

// Get session data
$sessData = !empty($_SESSION['sessData'])?$_SESSION['sessData']:'';

// Get status message from session
if(!empty($sessData['status']['msg'])){
    $statusMsg = $sessData['status']['msg'];
    $statusMsgType = $sessData['status']['type'];
    unset($_SESSION['sessData']['status']);
}

?>

html with php loop with title, image, id, date and unique id for counter


<!DOCTYPE html>
<html lang="pl" dir="ltr">
  <head>

  </head>
<body>
            
             <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
             <script src="js/main.js"></script>

<section id="boxes">


    <?php
            if(!empty($images)){ $i=0;
                foreach($images as $row){ $i++;
        $defaultImage = !empty($row['default_image'])?'<img src="uploads/images/'.$row['default_image'].'" alt="" />':'';

        ?>

<div class="box" >
  <div class="des">
    <a href='<?php echo $row['title']; ?>'>
    <?php echo $defaultImage; ?>
      </a>

<p>Date: <?php echo $row['czas']; ?></p>

    <script>var countDownDate = new Date("<?php echo $row['czas'];?>").getTime();</script>

      <p id="<?php echo $row['id']; ?>"></p>

  

      </div>
      </div>

  <script>
      // Set the date we're counting down to


      // Update the count down every 1 second
      var x = setInterval(function() {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Output the result in an element with id="licz"
        document.getElementById("<?php echo $row['id']; ?>").innerHTML = days + "d " + hours + "h "
        + minutes + "m " + seconds + "s ";

        // If the count down is over, write some text
        if (distance < 0) {
          clearInterval(x);
          document.getElementById("<?php echo $row['id']; ?>").innerHTML = "EXPIRED";
        }
      }, 1000);


      </script>

    <?php } } ?>

</section>

</body>
</html>

**in result in browser i get countdown only from last row even that script get proper date to countdown !!! every loop in result has proper date but script countdown date from last row **

enter image description here

DON'T add script in a loop. Certainly not the SAME script - your countDownDate gets hoisted — mplungjan, Nov 11 '21 at 13:25
Just add the date as a data-attribute to the div and then loop all divs — mplungjan, Nov 11 '21 at 13:27
`
` then `let x = setInterval(function() { document.querySelectorAll(".date").forEach(p => let countDownDate = new Date(p.dataset.date).getTime(); ....` — mplungjan, Nov 11 '21 at 13:30
Anywhere you like as long as the elements exist first. You might want to wrap in a load handler: `window.adddEventListener("load",function() { ...... }` Just make sure it is outside the loop — mplungjan, Nov 11 '21 at 14:58
ok i don't understand JS that much, I can Paypal you for do this properly — Korab, Nov 11 '21 at 15:15
I’m writing a full version but need to go home. I’ll post you a script in 2 hours or so — mplungjan, Nov 11 '21 at 15:27

javascript timer countdown only last row from db

0 Answers0