I am making a restaurant page using webpack for the first time, so there is only a single html page and the when you click on the menu aur contact-us buttons in navbar it clears the dom and loads the respective page but when you open the page and navigate on any page, it changes for the first time only and it doesn’t render any of the page after that when you click on any pages.

My main.js code:

import loadHome from "./pages/home";
import loadMenu from "./pages/menu";
import loadContactUS from "./pages/contactUs";
import firstLoad from "./modules/firstLoad";
import renderPage from "./modules/render";

firstLoad();

const getHeaderButttons = () => {
  const homeButton = document.querySelector("#home-btn");
  const menuButton = document.querySelector("#menu-btn");
  const contactUsButtton = document.querySelector("#contactUs-btn");

  return { homeButton, menuButton, contactUsButtton };
};

const { homeButton, menuButton, contactUsButtton } = getHeaderButttons();

homeButton.addEventListener("click", function () {
  console.log("home loaded");
  renderPage();
  loadHome();
});

menuButton.addEventListener("click", function () {
  console.log("menu loaded");
  renderPage();
  loadMenu();
});

contactUsButtton.addEventListener("click", function(){
  console.log("contactUs loaded")
  renderPage();
  loadContactUS();
})

firstLoad function:

import loadHome from "../pages/home.js"


export default function firstLoad(){
   loadHome()
}

renderPage function:

const renderPage = () => {
    const wrapper = document.getElementById("wrapper")
    while(wrapper.hasChildNodes()){
        wrapper.removeChild(wrapper.firstChild)
    }
    return wrapper
};

export default renderPage

Ig the event is not getting triggered for some reason but I can’t understand why, sorry if it’s something simple I can’t get it. And thanks!