javascript - 如何让 JavaScript 函数在不同的 HTML 页面上工作？

Question

我正在构建一个包含多个 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 文件，我就无法将我需要的信息位传递出去。如何使用自己的 JS 文件进入新的 HTML 页面，而不会停止和丢失我当前所在的函数中的所有内容，在旧页面的 JS 文件下？例如，参数“2021”或“2088”将被传递到 getStandings() 函数中，该函数将使用来自 API 的数据填充新的 HTML 页面。如果我跳转到带有新 JS 文件的新 HTML 页面，这将丢失。

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

标签： javascripthtml

Answer 1

解决了！正如amn所说，我可以将URL 参数添加到新 HTML 页面的 URL 末尾，然后在进入新 HTML 页面后从其自己的 URL 获取变量。