Jump to content

Countdown Timer Code Causing Javascript Error across website

Go to solution Solved by melody495,

Recommended Posts

Hi Everyone! We're getting a few different Java errors as indicated by our web console and our Microsoft Clarity readings. This picture shows the errors. Our website is: http://blate.co

 image.png.b97d8f13e49f85f19a03746c2e5b9deb.png

We think it's our countdown timer. This is the script we have on our code injection page:

<script>const
  CountDownZone = document.querySelector('#count-down-Timer strong'),
  TimeTarget    = 14   // 15:00hrs is the cut-off point   
  ;
function pad(n, len) { // leading 0's
  let s = n.toString();
  return '0'.repeat(Math.max(len - s.length, 0)) + s;
};

var timerRunning = setInterval(countDown, 1000);

function countDown() {
  let
    localTime = new Date(),                // get your local time
    utcTime   = localTime.getUTCHours(),  // find UTC hours
    estTime   = new Date()               // create a new date object for the EST time
    ;
    estTime.setHours(utcTime-5);        // adjust it for EST hours.


  if (
     (estTime.getDay() > 0) && (estTime.getDay() < 6)       // Monday to Friday only
  && (estTime.getHours() < TimeTarget)
     ) 
  {                     
    let
      count_HM = [],
      hrs  = (TimeTarget - 1) - estTime.getHours(),
      mins = 59 - estTime.getMinutes(),
      secs = 59 - estTime.getSeconds()
      ;

    if (hrs > 0)             { count_HM.push(hrs + ' hr'); }
    if (hrs > 0 || mins > 0) { count_HM.push(pad(mins, 2)+ ' min'); }
    count_HM.push(pad(secs, 2)+ ' sec');

    CountDownZone.textContent = count_HM.join('    ');
  }
  else {
    document.getElementById('count-down-Timer').textContent = 'Order Before 3PM EST Mon-Fri (12PM Sat) For Same-Day Shipping!';
    clearInterval(timerRunning);
  }
}</script>

And this is the html we use to call the script on each page we want the timer to be:

<center><div id="count-down-Timer">Time Left to Order for Dispatch Today:<br><strong>0.00.00</strong> </div>
</center> 

 

We're looking to clean up our site before Black Friday so If anyone can help fix this, that would be greatly appreciated!

 

Link to comment
  • Replies 13
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

31 minutes ago, BlateCo said:

<center><div id="count-down-Timer">Time Left to Order for Dispatch Today:<br><strong>0.00.00</strong> </div>
</center> 

Hi, I haven't gone through the full code, but this here is missing the closing </br>. Try that and let me know how it goes.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
7 hours ago, melody495 said:

Hi, I haven't gone through the full code, but this here is missing the closing </br>. Try that and let me know how it goes.

Hi and thank you for pointing that out! Fixed that, however it looks like the error is actually happening on the pages that don't contain the "call" to the countdown timer script. So it seems like it's a problem with the code. 😕

Link to comment

Hi, can you let me know where you've placed the code? 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
5 minutes ago, melody495 said:

Hi, can you let me know where you've placed the code? 

Yes! It's injected at the end of the footer on the code injection page. In my console there seems to be a countdown running on all pages, even though the code isn't being called.

 

Oh, I did have something else I'd like to ask, if you happen to know anything about this as well: We're getting Javascript loading errors from Squarespace resources. Our mobile loading speed score is really low because of Javascript loading issues, and most of them says they're coming from unused Squarespace Java resources (in the page speed report we got back). I've attached a picture from my web console showing the Squarespace errors. Do you know anyway of correcting these? I greatly appreciate any light you may be able to shed on this!

 

Screenshot 2023-11-14 at 8.31.38 PM.jpg

Link to comment
Quote

 

We're getting Javascript loading errors from Squarespace resources.

I've attached a picture from my web console showing the Squarespace errors. Do you know anyway of correcting these?

 

Only Squarespace can correct their own errors.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

You're experiencing the same errors then?

I haven't checked recently but as a general statement whenever I'm working in the console SS is producing some errors. I generally don't worry about them unless I can see a visible affect in sites, other than loading times.

In general most tools report SS does not perform well speed wise. You'll find many reports on this forum. Once you've done all you can with your own custom code and images, there is nothing you can do. After that it is a Squarespace issue and they move when they want to move.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • Solution
13 hours ago, BlateCo said:

Yes! It's injected at the end of the footer on the code injection page. In my console there seems to be a countdown running on all pages, even though the code isn't being called.

Hi, sounds like you have put the code in Site Wide code injection, so it is in every page. If you only want this on a specific page, please put the code in the code injection of that page only.

In terms of your issue, I went back to look at your post again, your console already tells you what the issue is. That 'textcontent' is null. So at the point of the code being run, there is nothing in 'textcontent'. The footer is being run at website load, so it's likely not when you want to run your code.

I suggest you wrap your code in document ready or domcontentloaded.

$(document).ready(function () {
}

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
3 hours ago, melody495 said:

Hi, sounds like you have put the code in Site Wide code injection, so it is in every page. If you only want this on a specific page, please put the code in the code injection of that page only.

In terms of your issue, I went back to look at your post again, your console already tells you what the issue is. That 'textcontent' is null. So at the point of the code being run, there is nothing in 'textcontent'. The footer is being run at website load, so it's likely not when you want to run your code.

I suggest you wrap your code in document ready or domcontentloaded.

$(document).ready(function () {
}

 

Awesome, thank you. I have the script as inline code so wrapping it in

$(document).ready(function () {
}

shows that text on the page. However, I did change the code to "module" from "text/javascript", which has made it run like a deferred external js file.

It didn't work in each page's header, so I went ahead and put it in each individual page (underneath the code that called the script.. for some reason it didn't work until I did this). (didn't realize I could do that, thought it had to be in the footer for some reason). Now it's working perfectly. Thank you!!

Edited by BlateCo
fixed2
Link to comment
50 minutes ago, BlateCo said:

Awesome, thank you. I have the script as inline code so wrapping it in

$(document).ready(function () {
}

shows that text on the page. However, I did change the code to "module" from "text/javascript", which has made it run like a deferred external js file.

I'm not sure what "module" is, is this a third party plugin you're using? But glad it's all working for you!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
1 hour ago, melody495 said:

I'm not sure what "module" is, is this a third party plugin you're using? But glad it's all working for you!

No, it's java language that tells the web browser to treat inline code like an external resource so that it loads at the end of the page content rather than inline with the body. This keeps the java from blocking rendering.

Instead of using <script type="text/Javascript" .... just do <script type="module"

That's all! Just learned that today.

Link to comment
22 minutes ago, BlateCo said:

Instead of using <script type="text/Javascript" .... just do <script type="module"

Ah, you were adding it to the script tag. Side note, instead of 'module' you can more directly use 'defer'. 

I normally would use DOMContentLoaded for situations where I need to read from the DOM. 'defer' is run before DOMContentLoaded. It seems to be working for you, but if you do run into issues, then using DOMContentLoaded would work for what you are doing.

Good luck!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Website Developer
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Customisation help <- send me your design
 Did I help? I like coffee (Thank you)

Link to comment
8 minutes ago, melody495 said:

Side note, instead of 'module' you can more directly use 'defer'. 

For information, the defer attribute should only be used when the src attribute is being used. It would have no effect on inline scripts 🙂

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.