I'm trying to pass the innerHTML from an event from one js file to another js file that's on a different html page. Essentially I'm trying to create that site location you see on websites. home or home > some-other-page-after-home.

My initial html has about six links. They all go to different pages that are structured exactly the same but have different names and will have different info in them. So I'm trying to use the same html for all of them and not have to make six different html pages.

So what I did was, made an event listener that grabs the word of whatever link you are on. I've logged it to the console and it works fine. This is the home of this site. The next layer of the site is one of these six pages that all look the same.

I want the page to say home > page1 or home > page2 on the next page when you click on one of the six links and I want that page1/page2 value to be the value that I get from this event listener.

I don't know if this is a practical way to approach this type of problem but it was the first idea I thought of. I have my event listener pass it's value to an object and then I have that object imported in another js file that the other html is linked to.

The problem is that when I get to the next page the object property {name: e.target.innerHTML} doesn't have a value anymore because in the context of that page e.target.innerHTML doesn't mean anything anymore. Or at least I think that's what the problem is.

Here are the scripts.

choose-forum.js

let forum = document.querySelector('.column');

export let forumInfo  = {
    name: ""
};

const getForumName = (e) => {
    forumInfo.name = e.target.innerHTML;
    console.log(forumInfo.name);
}

forum.addEventListener('mouseover', getForumName);

page2.js

import { forumInfo } from "./choose-forum.js";

let forumNav = document.querySelector('.forumNav');

const onLoad = () => {
 forumNav.innerHTML = forumInfo.name;
}

window.addEventListener('load', onLoad);

logging forumInfo.name says

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'.

I'm assuming that's because forumInfo.name is equal to the event target that is triggered by the listener on the other file.

Any one know a way around this? I also thought about making the location bar a react component but I've just recently started working with react and I haven't learned routes or how to pass info to different pages with react so I figured I'd see if I could come up with something by myself.