So I have two html files and they are both linked to another another and share the same css/js file

Question

So I have two html files and they are both linked to another another and share the same css/js file. when I use a btn on one index.html and click it I want it to return append something to a section/div on index2.html. I have the code but for some reason when I run it I get an error so I console.logged it and it returns null. How do I access elements from another html file do I need to import that into js? index:

<a href="index.html">home</a>
    <a href="test.html">test</a>

    <button class="btn" onclick="add()">addP</button>

index2:

 <a href="index.html">home</a>
    <a href="test.html">test</a>


    <h1>add p below </h1>


    <div class="pbox">

    </div>

I want to access the div.pbox

Answer 1

You are facing a few issues here. On the home page there is no pbox and on the test page there is no add button this is easy enough to solve with a conditional to see if they even exist or using 2 JavaScript files.

The next problem you face is how you store the information and get it from one page to another. Once the page reloads the information will just go away. The answer in this case would be local storage.

When the page loads it checks for the existence of a list in local storage. If it exists it gets that information and parses it. If it does not exist it is just an empty array. This happens on both pages because they both need this information.

When the test page loads it simply grabs the information in the list and maps over it to fill out the pbox with whatever is in the list at that time.

On the home page once the button is clicked it pushes the new item to the list array then updates the local storage.

Here is the Sandbox Link