Countdown Timer Code Causing Javascript Error across website

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

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!

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.

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. 😕

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

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!

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.

1 hour ago, creedon said:

Only Squarespace can correct their own errors.

You're experiencing the same errors then? How does your mobile page speed look?

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.

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!!

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!

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.

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!

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 🙂