Javascript Issue - Cannot read property 'querySelector' of null

Hi Helpful Comrades,

Please let me start by saying I don’t profess to know anything at all about coding in JS. It’s something I’m going to have to wise up on in the coming years but I know I’m one hell of a Ctrl+C - Ctrl+V’er. I found this awesome page instructing how to create your own JS countdown timer in 18 lines of JS. I copied and pasted everything from this site into my webflow site with the only alteration being my deadline. You can see the article here. The summary of all the code is here and this is what I copied and pasted into various ares of my site. CSS and JS into head of site. HTML into a div on the page I want the clock on. Very good tutorial but Webflow seems to be having issues…

The script ‘cannot read property ‘querySelector’ of null’ but I’ve had several JS experts looking over the code and they can’t understand why it’s not working, everything is coded up right - is there something that Webflow specifically is interrupting?

Here is my shareable link: https://preview.webflow.com/preview/firehouse-fitness?preview=b3dcac57311c96b42086d617f8ea712a

Please wizards of JS, show me what me and my friends could not uncover. I just need to get the clock to fire up and initialise but the time never appears.

@thesergie can you tag someone who could help?

You can’t initialize the script in the head, as the body content has not been loaded yet, and the clock and it’s child elements will not be found when the script runs.

You can simply move all custom code to the footer (before end body tag), or wrap the code in document ready functions.


Also, feel free to contact me for further code help and/or customization of third-party plugins

2 Likes

Thanks @samliew , I can’t believe it was so simple!

Lesson learnt.