特定页面上不存在元素

Question

我创建了一个网站，其中包含 index.html 和 quiz.html，一个 style.CSS 和一个 app.JavaScript。

我在 JS 中添加了一些引用这两个页面的函数。 让我们说： Page 1 index.html： app.js 有一个事件侦听器，可以在单击时显示一个框。 然后那个框有一个按钮可以移动到 quiz.html（一切正常）。 第 2 页 quiz.html：在 JavaScript 我有运行测验的功能。 问题是代码在到达测验函数之前就中断了，其中一行指向第一页。

Error: app.js:14 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js:14:35

第 14 行是document.getElementById('btnPlay').addEventListener('click', openBox) ，它指的是 index.html 中的一个元素，而不是我现在 quiz.html 中的页面。

我明白为什么，因为在当前页面上我们没有对它的引用。 但是我在很多地方都读过，通常最好使用一个 app.js 文件，而不是每个 html 页一个。 我们如何进行这项工作？ 有什么建议么？

Answer 1

在某些页面B上，您没有#btnPlay元素，因此document.getElementById('btnPlay')等于undefined 。 而且您不能为其分配事件监听器： undefined.addEventListener 。

确保该元素存在——在继续之前
使用可选链接?. .

document.getElementById('btnPlay')?.addEventListener('click', openBox)

否则在页面B上找不到“#btnPlay”，您的 JavaScript 将中断。

---

解决该问题的另一种“旧”方法是使用声明：

const EL_btnPlay = document.querySelector("#btnPlay"); 
if (EL_btnPlay) EL_btnPlay.addEventListener("click", openBox);

前面提到的只是做同样事情的简写。