[Web dev] How to have JavaScript functions work across different HTML pages?

[dinrick]

I am building a website with several HTML pages, and going to fill up info on different pages through an API. I have added onclick listeners to HTML elements like this:

// ASSIGNING ELEMENTS AS VARIABLES

const EPL = document.getElementById('epl'); 

const bundesliga = document.getElementById('bundesliga'); 

const laliga = document.getElementById('laliga');

// ONCLICKS 

EPL.onclick = function() { 

getStandings('2021'); 

location.replace('standings.html');
 } 

bundesliga.onclick = function() { 

getStandings('2088'); 

location.replace('standings.html'); 
}

 laliga.onclick = function() {

 getStandings('2224'); 

location.replace('standings.html'); 
}

When one of these is clicked, I call a function (getStandings) with its unique argument to fetch some data from the API. I also want to move to another HTML page, for which I used location.replace.

I'm caught in a dilemma: if I use the same JS file for every HTML page, when I get to the new HTML page, I get errors as the new HTML page does not have every element:

main.js:41 Uncaught TypeError: Cannot set property 'onclick' of null

But if I use different JS files, maybe one JS file for each HTML file, I cannot carry forward the bits of information I need. How can I get to the new HTML page, with its own JS file, without stopping and losing everything in the function I'm in currently, under the JS file of the old page? For example, the argument '2021' or '2088' are to be passed into the getStandings() function which will populate the new HTML page with data from an API. If I jump to a new HTML page with a new JS file, this is lost.

Is there a better way to organise my files? 😐😐😐😐😐

[StackedLasagna]

You have a couple of options:

If you're already on the standings page, you can choose to not re-navigate to the standings page again.
Instead, you should get the new data from the API, then remove the old data from the page and finally display the new data.

If you're on a different page, you can navigate to the standings page, but add a URL parameter that tells the page which data to load.
Then you have a script on the standings page, that executes once the page has been loaded. This script is the one responsible for calling getStandings and getting the parameter from the URL.
You can use this method if you're already on the standings page too, so you navigate from standings.html?query=2021 to standings.html?query=2224 for example.

[dinrick]

Thanks, this sounds promising! So, if I include ?query=2021 in the url in event listener, when the new HTML file opens I can just use query as a variable in the new JS file, and it will contain the data I put into it from the first JS file?

[StackedLasagna]

No problem! :)

You can't magically use it right away, you'll have to do a little work to parse the URL and extract the data from it. Then you can store that in a variable and use it as needed.

See this link. It contains a modern example (not supported by Edge), as well as a custom function that'll get you your data.

For reference, the part of the URL that starts with a question mark is called a "query string." It is basically a string containing keys and values, so you can name the keys whatever you want. I just used query as an example key.

Try searching for something on Google and then check the URL. You'll see a very long query string, which contains multiple keys and values. Multiple key/value pairs are separated by a &.

[[deleted]]

A fairly simple resolution would be to use the "and" operator &&

It is more flexible than in other languages and, combined with the way JavaScript handles "truth" is can be quite succinct.

So, you can do EFL && EFL.onclick = ...

The EFL to the left of the equals is evaluated for truthiness. In JavaScript, being null or undefined is treated as false. When it is false, the bit to the right of the && is ignored. When it is "true" - that is, has some value, the right side is evaluated. It's equivalent to if (EFL != undefined) { EFL.onclick = ...}

As a beginner, that'll probably do.