Question 269619 in Html Question posted in
Some basic documentation can be found here.

Html – javascript on navbar doesn't work when I just extend it onto other pages

I’m currently making a website for a group project and ran into this problem. I have the index.html where I wrote the code for the navbar at.. Now I want the navbar to appear on other pages as well and I did that using

fetch('index.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem,oldelem);
})

it worked but the problem is, the hamburger menu I have doesn’t work when clicked on the other pages… What may be the issue here? Here is the complete code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Literature</title>
</head>
<body>
    <header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">GroupOneBalBals</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="home.html" class="nav-link">Home</a>
                </li>
                <li class="nav-item">
                    <a href="blog.html" class="nav-link">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="documentation.html" class="nav-link">Documentation</a>
                </li>
                <li class="nav-item">
                    <a href="aboutus.html" class="nav-link">About Us</a>
                </li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </header>
        </nav>
        <script src="script.js"></script>
    </div>
</body>
</html>

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Document</title>
</head>
<body>
    <script id="replace_with_navbar" src="script.js"></script>
</body>
</html>

script.js

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", mobileMenu);

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

const navLink = document.querySelectorAll(".nav-link");

navLink.forEach(n => n.addEventListener("click", closeMenu));

function closeMenu() {
    hamburger.classList.remove("active");
    navMenu.classList.remove("active");
}

nav.js

fetch('index.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem,oldelem);
})

I appreciate the help, thank you!!

I tried multiple other ways to use my navbar on other pages but none of them worked so far, I also tried just putting nav.js code on the same file as script.js but it ended up just giving a blank page instead

Tags:

2

Answers


  1. 0

    In this cases the issue hamburger menu not working on other pages after dynamically loading the navbar from index.html is likely due to the fact that the event listeners for the hamburger menu are set up in your script.js file, but when you dynamically load the navbar, the JavaScript code in script.js is not re-executed on the other pages.

    Possible solution:

    fetch('index.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem, oldelem);
 
    const hamburger = document.querySelector(".hamburger");
    const navMenu = document.querySelector(".nav-menu");

    hamburger.addEventListener("click", mobileMenu);

    function mobileMenu() {
        hamburger.classList.toggle("active");
        navMenu.classList.toggle("active");
    }

    const navLink = document.querySelectorAll(".nav-link");

    navLink.forEach(n => n.addEventListener("click", closeMenu));

    function closeMenu() {
        hamburger.classList.remove("active");
        navMenu.classList.remove("active");
    }
});
    Login or Signup to reply.
  2. 0

    First, modify script.js so that it will be an executable function. That will allow you to execute it when you please:

    function getHamburger() {
    const hamburger = document.querySelector(".hamburger");
    const navMenu = document.querySelector(".nav-menu");
    
    hamburger.addEventListener("click", mobileMenu);
    
    function mobileMenu() {
        hamburger.classList.toggle("active");
        navMenu.classList.toggle("active");
    }

    const navLink = document.querySelectorAll(".nav-link");

    navLink.forEach(n => n.addEventListener("click", closeMenu));

    function closeMenu() {
        hamburger.classList.remove("active");
        navMenu.classList.remove("active");
    }
}

    Then you will simply be able to call it from your fetch:

    fetch('index.html')
.then(res => res.text())
.then(text => {
    let oldelem = document.querySelector("script#replace_with_navbar");
    let newelem = document.createElement("div");
    newelem.innerHTML = text;
    oldelem.parentNode.replaceChild(newelem,oldelem);
    getHamburger();
})

    You can call it by itself as well if you do not have a fetch and you do not need to wait for anything:

    getHamburger();

    Or you can attach it to events, like:

    window.addEventListener('load', getHamburger);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search