我正在构建一个包含多个 HTML 页面的网站，并打算通过 API 填充不同页面的信息。我已将 onclick 侦听器添加到 HTML 元素中，如下所示：

// 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'); 
}

当单击其中一个元素时，我会使用其唯一参数调用函数 (getStandings) 以从 API 中获取一些数据。我还想转到另一个 HTML 页面，为此我使用了 location.replace。

我陷入了两难境地：如果我对每个 HTML 页面使用相同的 JS 文件，那么当我进入新的 HTML 页面时，我会收到错误，因为新的 HTML 页面不包含所有元素：

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

但是，如果我使用不同的 JS 文件，也许每个 HTML 文件都有一个 JS 文件，那么我就无法传递我需要的信息。如何才能转到新的 HTML 页面（带有自己的 JS 文件），而不会停止并丢失我当前所在的函数中旧页面的 JS 文件下的所有内容？例如，参数“2021”或“2088”将传递到 getStandings() 函数中，该函数将使用来自 API 的数据填充新的 HTML 页面。如果我跳转到带有新 JS 文件的新 HTML 页面，则会丢失这些数据。

有没有更好的方法来组织我的文件？😐😐😐😐😐