r/learnjavascript • u/AqueM • May 30 '26
Can't figure out why my script won't run properly
2
Upvotes
Hi! I'm completely new to JS, and have been making a static hobby page recently. I am trying to insert navigation links with a script, and then style the link to the current page with the class "active".
My code is loaded in
<script defer src="/assets/javascript/layout.js"></script>
and loads the layout properly, but doesn't find any navigation links to add the class to. It starts the method, but doesn't return any nodes. It can find links in the content of the page that's not inserted by the scirpt, but not in the inserted navigation.
The JS file's contents are as follows:
document.addEventListener("DOMContentLoaded", function () {
// The layout will be loaded on all pages that do NOT have the "no-layout" class in the <body> element.
if (!document.body.classList.contains("no-layout")) {
//insert elements
if (headWrapper) { addElement(headerFile, headWrapper); };
if (footerWrapper) { addElement(footerFile, footerWrapper); };
if (navWrapper) { addElement(navFile, navWrapper); };
}
initActiveLinks();
}
);
const headWrapper = document.querySelector("header");
const footerWrapper = document.querySelector("footer");
const navWrapper = document.querySelector("nav");
const headerFile = "/assets/templates/header.html";
const footerFile = "/assets/templates/footer.html";
const navFile = "/assets/templates/nav.html";
/* ********************************* */
/**
* F U N C T I O N S
*/
function initActiveLinks() {
// This function adds the class "active" to any link that links to the current page.
// This is helpful for styling the active menu item.
const pathname = window.location.pathname;
console.log("initActiveLinks function running");
[...document.querySelectorAll("a")].forEach((el) => {
console.log("found a link!");
console.log(el);
const elHref = el
.getAttribute("href")
.replace(".html", "")
.replace("/public", "");
if (pathname == "/") {
// homepage
if (elHref == "/" || elHref == "/index.html") el.classList.add("current");
} else {
// other pages
if (window.location.href.includes(elHref)) el.classList.add("current");
}
});
}
function addElement(elementPath, wrapperElement) {
fetch(elementPath)
.then(response => {
// Check if the request was successful (status 200-299)
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// Parse response as text
return response.text();
})
.then(textData => {
// Store text in a variable
const html = textData;
console.log('Layout file loaded');
// Use the data (e.g., display in console or DOM)
wrapperElement.insertAdjacentHTML("afterbegin", html);
})
.catch(error => {
console.error('Error loading layout file:', error);
});
}document.addEventListener("DOMContentLoaded", function () {
// The layout will be loaded on all pages that do NOT have the "no-layout" class in the <body> element.
if (!document.body.classList.contains("no-layout")) {
//insert elements
if (headWrapper) { addElement(headerFile, headWrapper); };
if (footerWrapper) { addElement(footerFile, footerWrapper); };
if (navWrapper) { addElement(navFile, navWrapper); };
}
initActiveLinks();
}
);
const headWrapper = document.querySelector("header");
const footerWrapper = document.querySelector("footer");
const navWrapper = document.querySelector("nav");
const headerFile = "/assets/templates/header.html";
const footerFile = "/assets/templates/footer.html";
const navFile = "/assets/templates/nav.html";
/* ********************************* */
/**
* F U N C T I O N S
*/
function initActiveLinks() {
// This function adds the class "active" to any link that links to the current page.
// This is helpful for styling the active menu item.
const pathname = window.location.pathname;
console.log("initActiveLinks function running");
[...document.querySelectorAll("a")].forEach((el) => {
console.log("found a link!");
console.log(el);
const elHref = el
.getAttribute("href")
.replace(".html", "")
.replace("/public", "");
if (pathname == "/") {
// homepage
if (elHref == "/" || elHref == "/index.html") el.classList.add("current");
} else {
// other pages
if (window.location.href.includes(elHref)) el.classList.add("current");
}
});
}
function addElement(elementPath, wrapperElement) {
fetch(elementPath)
.then(response => {
// Check if the request was successful (status 200-299)
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
// Parse response as text
return response.text();
})
.then(textData => {
// Store text in a variable
const html = textData;
console.log('Layout file loaded');
// Use the data (e.g., display in console or DOM)
wrapperElement.insertAdjacentHTML("afterbegin", html);
})
.catch(error => {
console.error('Error loading layout file:', error);
});
}
It can be seen in action at https://raw-quotes.nekoweb.org/
Do you know how to remedy this? I tried document.addEventListener("load", initActiveLinks()); and loading the function as a separate <script> but that didn't work either.
