元素在特定页面上不存在

Question

我创建了一个网站，它有index.html和quiz.html两种风格。CSS和一个应用程序。JavaScript。

我在JS中添加了一些引用这两个页面的函数。比方说：第1页index.html:app.js有一个事件监听器，可以在单击时显示一个框。然后，该框有一个移动到quiz.html的按钮(一切正常(。第2页quick.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中的一个元素，而不是我现在所处的页面

我理解为什么，因为在当前的页面上，我们没有引用它。但我在很多地方读到，通常最好使用一个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);

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