ARTICLE AD BOX
For my Neocities website, I have a Javascript script load up the header, footer, and the sidebars. I want to change the sidebars depending on the current HTML page that the user is on. Here is the Javascript snippet:
window.onload = () => { // Loads navbar.html to Div id "navbar" fetch('/assets/main/navbar.html') .then(data => { return data.text() }) .then( data => { document.getElementById("navbar").innerHTML = data; }) // Loads leftsidebar.html to Div id "leftsidebar" fetch('/assets/main/leftsidebar.html') .then(data => { return data.text() }) .then( data => { document.getElementById("left-sidebar").innerHTML = data; }) // Loads rightsidebar.html to Div id "rightsidebar" fetch('/assets/main/rightsidebar.html') .then(data => { return data.text() }) .then( data => { document.getElementById("right-sidebar").innerHTML = data; }) // Loads footer.html to Footer fetch('/assets/main/footer.html') .then(data => { return data.text() }) .then( data => { document.getElementById("footer").innerHTML = data; }) }And here is an example of the HTML code used to delineate the different Divs used as the header, footer, and sidebars:
<div id="wrapper"> <nav id="navbar"> <!-- Handled by Javascript --> </nav> <flex> <aside id="left-sidebar"> <!-- Handled by Javascript --> </aside> <aside id="right-sidebar"> <!-- Handled by Javascript --> </aside>I'm brand new to JS, HTML, and CSS. I feel like the answer is probably very simple, but I'm not entirely sure where to start. If you were to try to implement this feature, how would you do it?
