文章内容
2023/4/21 11:15:10,作 者: 黄兵
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
在使用 JavaScript 编写代码的时候，出现了如下错误：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
这个错误应该很常见，主要是页面上没有这个元素，之后无法获取，出现 null 的错误。
截图如下：
下面是示例代码：
<script>
const dismissBtn = document.querySelector('[data-dismiss="alert"]');
dismissBtn.addEventListener('click', function () {
this.parentElement.style.display = 'none';
});
</script>
如果页面上没有 button 按钮，但是下面的 script 代码在 js 文件当中，就会出现如上错误。
出现问题的原因：
通过上面的分析，我们可以总结出：
在 JavaScript 中，出现 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 错误通常是因为尝试在 null 值上使用某个属性或方法，例如在 null 元素上使用 addEventListener 方法。这通常意味着我们尝试访问不存在的元素或在加载 HTML 元素之前运行 JavaScript。
解决方案：
为了优雅地处理这个错误，我们可以在代码中检查变量是否存在或元素是否已经加载，然后再执行相关操作。例如，可以使用以下代码来检查元素是否已经加载，如果元素存在，则为其添加事件监听器：
const dismissBtn = document.querySelector('[data-dismiss="alert"]');
if (dismissBtn) {
dismissBtn.addEventListener('click', function() {
this.parentElement.style.display = 'none';
});
} else {
console.error('dismissBtn element not found!');
}
在上面的示例代码中，我们首先使用 document.querySelector 方法获取具有 data-dismiss="alert" 属性的元素。然后我们检查该元素是否存在，如果存在，则为其添加事件监听器。如果元素不存在，则打印错误信息到控制台。这样就可以避免出现 Uncaught TypeError 错误，并且能够更好地控制代码执行的流程。
参考资料：
1、chatGPT
其它推荐：
1、修复JavaScript中的“unexpected end of input”错误
4、关于Apple设备私有的apple-touch-icon属性详解
黄兵个人博客原创。
转载请注明出处：黄兵个人博客 - Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
评论列表