Why does this code cause errors

JavaScript
#1

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);
Usings multiple script tags on multiple html pages - asked on multiple forums but seems to be alot of different answers and unclarity lots of unclarity
#2

Hey @egglearn ,

Importing from another file instantiate that whole file, even if you only want the data in the file. So when you import data from app.js it instantiated the app.js file and thus creating the error, ‘cannot find textcontent’ because app.js cannot find your element.

Here’s an example:

1 Like
#3

ye this is what I thought was happening but I dont understand how to get around it, most website have multiple pages, its not clear to me how they share the code across all these pages without getting the errors I am getting

#4

Typically, what devs will do, and I do this often too, is put it inside a function. This will let you run the functions when you want it and it won’t be hard to implement it. Then you can have data, passed across. Then you can find a way to run the functions from the index.html file

Here’s an example:

1 Like
#5

ok so basically wrap everything i dont want to use in a function right? but I will have to run that function on the first page , so what will stop it running on the second, eg

if I change index.html to

function test() {
let first = document.getElementById("first");

console.log(first);

first.textContent = "dlsfjdlfsj;";
}

test()
let data = [1, 2, 3];

export { data };

this is still going to run and cause errors

#6

Well, if you have some JavaScript that is tied one specific HTML element, then you check if it exists in the JS before trying to decide anything with it. And most of your code shouldn’t be specific to one HTML page (f it is then there’s no point sharing it between things).

1 Like
#7

would you be able to apply this to the code above? ultimately what I want to do is take some data from one js file associated with one html page , import the relevant data into another js file and then use it on another html page. for example, lets say you have an html page that has a game on it so u have a game.js file. then on another html page you want to show the stats. the stats table is going to be a whole different set of code, but it needs to know the scores of the game. how would it get the data from the original js file and use it to build the stats page

#9

You might use localStorage.

You can probably also use the URL to pass data.

Edit: I guess for a high score with a game either of these is subject to manipulation by the user. But if you want the high score to be secure you likely have to use a backend I’d imagine.

1 Like
#10

The thing with client-side JS: Whenever the page reloads, or you load a new page, all that was stored inside the variables of your script is gone. Nothing is saved, it’s all resetted. @lasjorg already suggested local storage, which is one way to deal with the sitation. For non-sensitive data (a highscore, a meaningless nickname), this is usually a good way to handle it. Just don’t keep actual data like email addresses or passwords in local storage.

Another solution would be to not reload the page, but to swap the content (the HTML) of the page for a different one, using JavaScript. This is how JS frameworks and libraries like React work, but you can also do it with Vanilla JavaScript. The page doesn’t reload, only the view changes. You’d show the user a “highscore” view after the game is finished, and you’d still have access to the highscore value.

1 Like
#11

What @lasjorg says.

You don’t “load it into the file”, you use the JS to program the browser. You only need one [set of] files not one file per page, because otherwise you just end up duplicating logic.

For example you might have an event listener for click events that, if the event was triggered by something with an ID of “save- score” saves to local storage.

I understand your thinking, but one-to-one html-js files doesn’t actually make much sense

1 Like
#12

thanks for your responses, this kind of knowledge is very useful

#13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.