How can I add this countdown script twice on the same page?

Billy Batts

BANNED
Joined
Dec 16, 2016
Messages
5,884
Reaction score
11,012
Scripting is not my greatest feature.

I got 2 countdown timers, both have a separate ID but when I place them on the same page they both run the same time even though there is almost 2 months between them.

Any of you more knowledgeable guys know how to fix this?

Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
  color: #fff;
}
</style>
</head>
<body>

<p id="d1"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 10, 2017 00:01:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
   
    // 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="d1"
    document.getElementById("d1").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("d1").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

And:

Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
  color: #fff;
}
</style>
</head>
<body>

<p id="d2"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 4 2017 00:01:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
   
    // 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="d2"
    document.getElementById("d2").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("d2").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>
 
Scripting is not my greatest feature.

I got 2 countdown timers, both have a separate ID but when I place them on the same page they both run the same time even though there is almost 2 months between them.

Any of you more knowledgeable guys know how to fix this?

Fixed bro.

Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
  /*color:#fff;*/
}
</style>
</head>
<body>

<p id="d1"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 10, 2017 00:01:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
  
    // 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="d1"
    document.getElementById("d1").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("d1").innerHTML = "EXPIRED";
    }
}, 1000);
</script>


<p id="d2"></p>

<script>
// Set the date we're counting down to
var countDownDate2 = new Date("Oct 4 2017 00:01:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
  
    // Find the distance between now an the count down date
    var distance = countDownDate2 - 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="d2"
    document.getElementById("d2").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("d2").innerHTML = "EXPIRED";
    }
}, 1000);
</script>


</body>
</html>
 
Last edited:
Fixed bro.

Code:
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 60px;
  /*color:#fff;*/
}
</style>
</head>
<body>

<p id="d1"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Sep 10, 2017 00:01:25").getTime();

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

    // Get todays date and time
    var now = new Date().getTime();
  
    // 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="d1"
    document.getElementById("d1").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("d1").innerHTML = "EXPIRED";
    }
}, 1000);
</script>


<p id="d2"></p>

<script>
// Set the date we're counting down to
var countDownDate2 = new Date("Oct 4 2017 00:01:25");

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

    // Get todays date and time
    var now = new Date().getTime();
  
    // Find the distance between now an the count down date
    var distance = countDownDate2 - 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="d2"
    document.getElementById("d2").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("d2").innerHTML = "EXPIRED";
    }
}, 1000);
</script>


</body>
</html>
Thanks man, works great! Can you tell me what you added or changed so I can do this myself for the future? Too tired to compare the two otherwise I will check it tomorrow. ;)

Thanks again.
 
You have two identical variables countDownDate that store countdown time in this two codes. It will not work because first code set countDownDate variable and it will affect to second code.

You need use different names of variables that stores time in each copy. Just rename countDownDate variable in one of this scripts and it's will work right.
If you using few same codes on page you need to change countDownDate variable on each next copy of code.

Code:
//SECOND CODE

<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 4 2017 00:01:25").getTime(); // <------- Step 1: Change countDownDate to some name like countDownDate2 etc

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

   // Get todays date and time
   var now = new Date().getTime();
  
   // Find the distance between now an the count down date
   var distance = countDownDate - now; // <------- STEP 2: Change countDownDate to SAME name (countDownDate2) in Step 1
  
   // 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="d2"
   document.getElementById("d2").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("d2").innerHTML = "EXPIRED";
   }
}, 1000);
</script>
 
Last edited:
You have two identical variables countDownDate that store countdown time in this two codes. It will not work because first code set countDownDate variable and it will affect to second code.

You need use different names of variables that stores time in each copy. Just rename countDownDate variable in one of this scripts and it's will work right.
If you using few same codes on page you need to change countDownDate variable on each next copy of code.

Code:
//SECOND CODE

<script>
// Set the date we're counting down to
var countDownDate = new Date("Oct 4 2017 00:01:25").getTime(); // <------- Step 1: Change countDownDate to some name like countDownDate2 etc

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

   // Get todays date and time
   var now = new Date().getTime();
 
   // Find the distance between now an the count down date
   var distance = countDownDate - now; // <------- STEP 2: Change countDownDate to SAME name (countDownDate2) in Step 1
 
   // 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="d2"
   document.getElementById("d2").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("d2").innerHTML = "EXPIRED";
   }
}, 1000);
</script>
Thanks!
 
Back
Top