Countdown timer code not working - help please?

Hello

I have some code for a countdown timer, but it's not working. Could someone please help me work out why?

I'm using a code block with HTML. Photo attached for what it looks like currently - but no numbers!

I'm not a pro web designer, but understand a little about coding.

Thanks in advance for your time!

<style>#countdown{color:#fff;display:inline-block;text-align:center;font-size:1.5rem} #countdown>div{padding:10px; background:#e2dbd6; display:inline-block} #countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown"><div><span class="days" id="day"></span><div 
class="text">Days</div></div><div><span class="hours" id="hour"></span><div class="text">Hours</div></div><div><span class="minutes" id="minute"></span> <div class="text">Minutes</div></div><div><span class="seconds" id="second"> </span><div class="text">Seconds</div></div></div><p id="timer"></p></center> <script>var deadline=new Date("jan 1, 2020 15:37:25").getTime();var 
x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t% 
(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t% 
(1000*60*60))/(1000*60));var seconds=Math.floor((t% 
(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getEl ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0) {clearInterval(x);document.getElementById("timer").innerHTML="TIME 
UP";document.getElementById("day").innerHTML='0';document.getElementById("hou r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get ElementById("second").innerHTML='0'}},1000);</script> 
 

27 minutes ago, DonnaST said:

I have some code...but it's not working. I'm using a code block with HTML.

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

2 hours ago, paul2009 said:

It's difficult to provide you with specific advice as you haven't provided us with a working link. I recommend that you always provide a link (and a public password if the site isn't live).

However, your screenshot shows the page whilst you are logged in. Please note that code is disabled when you are logged in. To see your code working, open a new private or incognito window in your browser and enter your page’s URL without logging on.

Hi Paul

Thanks for your advice! Here is the link www.themumretreat.co.uk/membership

It's the pink timer I'm having trouble with, the blue one is a back-up for now.

Grateful for any help you can offer!

43 minutes ago, paul2009 said:

There are two issues.

Firstly, there are errors in your code. When you've copied the code you have introduced some additional spaces and line breaks. For example "getEl ementById" shouldn't have a space and neither should "innerHTM L". Take a look through the code and remove the errors first. 

The second issue is that you should be counting down to the date (in the first line), but right now you've specified a date in the past. 🙂

Thank you, I really appreciate your help. 

I knew the date wasn't set, but I've done all that you've said, but sadly still not working. I may have to live with the blue one.

Thanks again!

Quote

but sadly still not working.

It appears you solved the issue? I seems to be working here.

 

36 minutes ago, creedon said:

It appears you solved the issue? I seems to be working here.

 

Hi

Yes I did thank you!!

However, I now have another problem - I want another timer lower down the page, have used exactly the same code, but it's not working. Cannot figure this out, any ideas please? thanks

Site URL: https://www.themumretreat.co.uk/membership

Morning!

I've got two countdown timers on one page, one is finally working, the other is not - but they have exactly the same code.

Secondly, I now want to change the HEX colour code, but it refuses to change.

Thanks for any advice you can offer!

 

Site URL: https://www.themumretreat.co.uk/membership

Hello

Would love some help please!

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code. I'm using a code block for each.

Also, I now want to change the HEX colour of the timer background blocks, but it refuses to change. 

Please know I am NOT a coder, but would be so grateful for any help.

Thank you 😃

1 hour ago, DonnaST said:

I have two countdown timers on the same page. One is working and one is not! Both have exactly the same code.

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

• If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
• The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:

<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:

<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

6 hours ago, paul2009 said:

You cannot simply duplicate the block of code because each block requires unique variables and IDs. (IDs must be unique on the page.)

However:

• If the timers are counting down to the same point in time, you can leave the 'deadline' variable the same. You won't need to duplicate this line of code.
• The classes can remain the same if you want them to have the same colours. You also won't need to duplicate the content that starts with <style> and ends with </style>.

To create the second countdown, make a copy of the working code from the first and then change each variable name (var) and each ID in the HTML and the JavaScript.

For example, the HTML section of the first countdown element starts with:

<div id="countdown">
  <div>
    <span class="days" id="day">
    </span>

In the second countdown, you could add '2' to make the IDs different to the first countdown:

<div id="countdown2">
  <div>
    <span class="days" id="day2">
    </span>

You'll need to do this throughout.

Thank you so much Paul!!

This is really kind of you, I can't thank you enough. It took me a while to figure out what you were saying (not your fault, just a little way over my head) but I got there!!

Thank you so much x

 

 

Hi everyone, 

 

I'm struggling with this countdown, I think I miss something but I don't know what. 

Could you please help me to fix this ? 

 

On 4/6/2021 at 2:12 PM, ElizabethM said:

Hi everyone, 

 

I'm struggling with this countdown, I think I miss something but I don't know what. 

Could you please help me to fix this ? 

 

This is the code I used 

<style>#countdown{color:#f5f2ec;display:inline-block;text-align:center;font-size:1.5rem}

#countdown>div{padding:10px; background:#b79b7d; display:inline-block}

#countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown">

  <div>

    <span class="days" id="day">

    </span>

    <div

class="text">jours</div>

  </div>

  <div>

    <span class="hours" id="hour">

    </span>

    <div

class="text">heures</div>

  </div>

  <div>

    <span class="minutes" id="minute">

    </span>

<div class="text">minutes</div>

  </div>

  </div>

 

  <p id="timer"></p>

</center>

<script>var deadline=new Date("may 1, 2021 18:30").getTime();var

x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var

days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t%

(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%

(1000*60*60))/(1000*60));var seconds=Math.floor((t%

(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getEl

ementById("hour").innerHTML=hours;document.getElementById("minute").innerHTM

L=minutes;document.getElementById("second").innerHTML=seconds;if(t<0)

{clearInterval(x);document.getElementById("timer").innerHTML="TIME

UP";document.getElementById("day").innerHTML='0';document.getElementById("hou

r").innerHTML='0';document.getElementById("minute").innerHTML='0';document.get

ElementById("second").innerHTML='0'}},1000);</script>

@paul2009 

Do you know how i could fix this code that is not working 😕 

Please see the earlier posts in this thread.

Hello guys,

I'm using a similar code for a countdown timer, made sure there are no spaces, specified a date in the future but still it does not show correctly. 

 https://www.hateworks.net/vein-master

Thanks in advance!

Hello, 

 

I'm having a problem with my countdown timer, on the admin side it is working fine and counting down, but when I publish the numbers disapear. Could anyone help?

This is the website:

https://www.jaynepierson.com/

This is the code I am using:

 <style>#countdown{color:#white;display:inline-block;text-align:center;font-size:1.4rem} #countdown>div{padding:10px; background:#black; display:inline-block} #countdown div>span{padding:5px; display:inline-block} </style><center><div id="countdown"><div><span class="days" id="day"></span><div class="text">Days</div></div><div><span class="hours" id="hour"></span><div class="text">Hours</div></div><div><span class="minutes" id="minute"></span><div class="text">Minutes</div></div><div><span class="seconds" id="second"></span><div class="text">Seconds</div></div></div><p id="timer"></p></center><script>var deadline=new Date("sep 17, 2021 00:00:00").getTime();var x=setInterval(function(){var now=new Date().getTime();var t=deadline-now;var days=Math.floor(t/(1000*60*60*24));var hours=Math.floor((t%(1000*60*60*24))/(1000*60*60));var minutes=Math.floor((t%(1000*60*60))/(1000*60));var seconds=Math.floor((t%(1000*60))/1000);document.getElementById("day").innerHTML=days;document.getElementById("hour").innerHTML=hours;document.getElementById("minute").innerHTML=minutes;document.getElementById("second").innerHTML=seconds;if(t<0){clearInterval(x);document.getElementById("timer").innerHTML="TIME UP";document.getElementById("day").innerHTML='0';document.getElementById("hour").innerHTML='0';document.getElementById("minute").innerHTML='0';document.getElementById("second").innerHTML='0'}},1000);</script>

 

Thanks in advance!

Briony