I am having trouble working with multiple javascript and html files.
i have a
html file - index.html
html file - second.html
js file - app.js
js file - second.js
here is the code below,
when I am on the first page, everything works fine, but if i click onto the second page the app.js file loads and causes errors like , cannot find textcontent … . I don’t expect this to happen to as I only have the
<script src="second.js"> </script>
in my second.html file and i exported the relevant data from the app.js file into the second.js file . what am i doing wrong ?
index.html
<html>
<body>
<p id="first">im the first page</p>
<a href="./second.html">go to second page</a>
<script src="./app.js" type="module"></script>
</body>
</html>
app.js
let first = document.getElementById("first");
console.log(first);
first.textContent = "dlsfjdlfsj;";
let data = [1, 2, 3];
export { data };
second.html
<html>
<body>
<p id="second">im the second page</p>
<a href="./index.html">go back to first page</a>
<script src="./second.js" type="module"></script>
</body>
</html>
second.js
let second = document.getElementById("second");
console.log(second);
import { data } from "./app.js";
console.log(data);