JavaScript报Uncaught TypeError: Cannot read property 'addEventListener' of null如何解决

错误原因 #

你代码里的querySelector类选择器缺少.前缀：querySelector方法传入不带前缀的字符串时，会被识别为标签选择器，去查找不存在的<prev-btn>、<next-btn>自定义标签，最终返回null，调用addEventListener时就会触发空值类型错误。

修复方案 #

将按钮选择部分的代码修改为：

const prevBtn = document.querySelector(".prev-btn"); 
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".random-btn");

如果你的三个按钮是通过id属性定义的，也可以改为用getElementById获取：

const prevBtn = document.getElementById("prev-btn"); 
const nextBtn = document.getElementById("next-btn");
const randomBtn = document.getElementById("random-btn");

额外优化建议 #

• 可以给DOM元素获取逻辑增加非空判断，避免同类报错：

if (nextBtn) {
  nextBtn.addEventListener("click",function(){
    currentItem++;
    // 增加边界判断，避免数组越界报错
    if (currentItem >= reviews.length) currentItem = 0;
    showPerson(currentItem);
  });
}

• 同理prevBtn的点击逻辑也要添加边界判断，当currentItem < 0时赋值为reviews.length - 1。

内容的提问来源于stack exchange，提问作者masfiq reza