Problem displaying countdown

[vidurath]

Please check my code below and see what i might be missing. i am new to javascript i tried reading other solutions and i cant be able to find it working.

The script is working perfectly the problem is IT ONLY DISPLAY COUNT DOWN FOR THE FIRST ROW AND IGNORE THE REST OF THE ROWS.

post.php

<?php
                              $sql = "SELECT * FROM post";
                              $result = $conn->query($sql);
                              if($result->num_rows > 0) {
                                while($row = $result->fetch_assoc()) {

                              ?>

                                <?php   $date = $row['date'];
                                  $h = $row['h'];
                                  $m = $row['m'];
                                  $s = $row['s']; ?>

		<ul class="job-list full">


                                <li><a href="job-page.html">

                          				<div class="job-list">
                          					<h3><?php echo $row['title']; ?> </h3>
                                    <?php include("countdown3.php"); ?>
                                    <!-- <div id="demo"></div> -->
                                    <!-- <p id="demo<?=$row['id']?>"></p> -->
                                      <!-- <p id="demo<?php= echo $row['id_post']?>"></p> -->

                          					<div class="job-icons">

                          						<span></i> <?php echo $row['title']; ?></span>
                          						<span></i>  countdown</span>
                                      <!-- <p id="demo"></p> -->
                          					</div>
                                    <p><u>Project Summary:</u></p>
                          					<p><?php echo substr($row['description'], 0, 200); ?></p>
                          				</div>
                          				</a>
                          				<div class="clearfix"></div>
                          			</li>










		</ul>

    <?php
       }
     }
   ?>

[m_hutley]

And what is the content of countdown3.php?

[vidurath]

countdown.php

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

<script>
  // Set the date we're counting down to
  // 1. JavaScript
  // var countDownDate = new Date("Sep 5, 2018 15:37:25").getTime();
  // 2. PHP



  var countDownDate = <?php


echo strtotime("$date $h:$m:$s" ) ?> * 1000;
  var now = <?php echo time() ?> * 1000;

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


      // Get todays date and time
      // 1. JavaScript
      // var now = new Date().getTime();
      // 2. PHP
      now = now + 1000;

      // Find the distance between now an 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="demo"
      document.getElementById("demo").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("demo").innerHTML = "EXPIRED";
      }
  }, 1000);
  </script>

[TechnoBear]

Off Topic

@vidurath: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your last post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

[m_hutley]

@vidurath

<p id=“demo”></p>

@vidurath

document.getElementById(“demo”).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

@vidurath

document.getElementById(“demo”).innerHTML = “EXPIRED”;

You cant have multiple elements with the same ID. Otherwise it’s not really an ID

Add the id_project to those three lines and it should work.

EDIT: You may also need to add it to the definitions of x, so that your intervals have different variable names.

[vidurath]

Thank you for the reply:grinning:) Im actually new to this site and mess up when posting the codes

How to add the id_project and to the definition of x?

> document.getElementById("demo<?php= echo $row['id_project']?>").innerHTML = days + "d " + hours + "h " +
>           minutes + "m " + seconds + "s ";

[m_hutley]

You’ve got an extra = there after the php, but yes. Just like that. Same thing with the other lines and the x’s (there’s 2 lines with x’s)

[vidurath]

thanks
it started working…
but cant figure out the x ?
Can you help me?

[m_hutley]

There are two lines in countdown3.php that involve the letter “x”. both of those should get the same PHP added directly after them, so that in the end the variables will be something like “var x123 = setInterval…”

If you leave them as ‘x’, the last timer will stop when any countdown (not just its own) reaches 0.