My website project - javascript defer

Web Development
1

Hey guys,

I’ve built my own website that has 4 separate html pages. I have 1 JS script page running interactivity on two of the pages. I have the tag with the relative path to my JS script at the bottom of every html page.

I’m having trouble with the JS functions on page 2 ‘Projects’ and I think that is because the javascript has been run by the browser from the bottom of page 1 before the elements relating to page 2 have been parsed. So when the JS script runs it returns ‘null’ for the elements relating to page 2 and therefore those functions don’t work.

I’ve read a fair bit about this from Stack overflow and I’ve tried to implement the ‘defer’ attribute in the tag at the bottom of each page in the hope that all the html pages will have parsed before the JS script runs but this doesn’t seem to work.

Can someone clarify for me what is the correct protocol here?

  1. Should every html page in a website have a link with the JS doc address, even if it’s for the same JS doc?
  2. How do I get all the html documents to load before running the JS script?
  3. Should I have one javascript page for each html page, so that I can link each relevant script at the bottom of the html page, thus allowing the html to parse before rendering those relevant js functions?

here’s my GitHub doc if anyone needs to see the full code: GitHub - Steven-codes-79/MyDevSite

Thanks
Steven