For the last couple of days I've been trying to figure out what's wrong with my site (https://hungry-goldberg-git.netlify.app/). The products, classes, gallery and contact pages all have a repeating header that pulls from the file (pageheader.html). The strange thing is about 60% of the time when I load the site and click through the links the page header displays properly. Other times, the pager header will show on 2 or 3 of the pages, but not the others. Another interesting thing is I am able to click through all of the links and see the headers the first time, when I click on the link again the header goes away (ex. I click products > classes > gallery > contact > classes... I will not see the text in the header again).
Through looking at into the Developer tools I see the property is set to null. I know this happens when the script tries to execute before the element is rendered on the page, but I can't figure out how to correct this. I already have <script src="/js/main.js"></script> at the bottom of my HTML right before the closing body tag. I also have my opening body tag to <body onload="titleInjection()">in hopes that would allow the JavaScript to wait until my page was fully loaded before it ran. However, that didn't work.
I also tried <script src="/js/main.js" defer></script> at the bottom, but that didn't work either. Can anyone possibly shed some light on what I'm doing wrong?
Just in case you would like to see all of the code I am using I'm including portions of it below.
classes.html
<!--===================== Page Title =====================-->
<header id="pageheader"></header>
pageheader.html
<div class="w-full mx-auto h-56 bg-img-header offset-navbar relative">
<div class="flex flex-col items-center">
<h1 id="sectiontext" class="font-merriweather tracking-wider text-shadow-black font-bold text-gray-300 text-center uppercase text-6xl absolute transform-center text-"></h1>
</div>
</div>
main.js
//loads pageheader and footer on pages//
$(function() {
$("#navigation").load("/navbar.html");
$("#pageheader").load("/pageheader.html");
$("#footer").load("/footer.html");
});
//replaces the text in the page header with the page's title//
var x = document.title;
function titleInjection() {
document.getElementById("sectiontext").textContent = x;
}
***NOTE: I used to have the variable defined after I called the function, but I saw another answer on here that suggested I should define that first. It helped go from 1 page header loading correctly to about 2 - 3, so I left it like this. I also tried to simplify this by writing document.getElementById("sectiontext").textContent = document.title;} but that also didn't work.
TLDR: I'm using innerHTML/TextContent to change my web page and it only works sporadically.
.load() is asynchronous. So when you're trying to find the sectiontext element, it doesn't exist yet because .load("/pageheader.html"); hasn't completed. You should call titleInjection() from its callback.
$(function() {
$("#navigation").load("/navbar.html");
$("#pageheader").load("/pageheader.html", titleInjection);
$("#footer").load("/footer.html");
});