解决为HTML元素添加class时出现的Uncaught TypeError: Cannot set properties of null错误

别担心，这个错误其实很常见，解决起来也不复杂！我来帮你拆解问题根源和修复方案：

错误原因分析 #

你看到的Uncaught TypeError: Cannot set properties of null (setting 'onclick')，本质是你的JavaScript代码尝试给一个「不存在的元素」绑定点击事件。

当你用document.querySelector('.exit-btn')这类方法查找元素时，如果DOM里找不到匹配该选择器的元素，就会返回null。这时候你再给null设置onclick属性，浏览器就会抛出这个错误。

为什么功能看起来还正常？大概率是其中一个元素在脚本执行时还没被DOM解析完成（比如脚本放在<head>里，HTML元素还没加载），或者某个选择器对应的元素在页面的某些状态下确实不存在，但其他元素的逻辑正常运行了。

具体修复方案 #

方案1：确保脚本在DOM加载完成后执行

这是最常见的修复方式，保证你的JS代码只在所有HTML元素都被浏览器解析后才运行：

• 最简单的方法是把你的JS代码放在HTML的</body>标签之前（也就是页面最后），这样HTML元素都已经加载完毕了。
• 或者用DOMContentLoaded事件包裹代码，这样不管脚本放在哪里，都会等待DOM就绪后再执行：

  document.addEventListener('DOMContentLoaded', function() {
    // 先获取所有元素
    const quizStart = document.querySelector('.quiz-btn');
    const quizPopup = document.querySelector('.start-quiz-popup');
    const quizMain = document.querySelector('.main');
    const quizExit = document.querySelector('.exit-btn');
  
    // 先检查元素是否存在，再绑定事件
    if (quizStart) {
      quizStart.onclick = () => {
        // 用可选链操作符?.，避免元素不存在时报错
        quizPopup?.classList.add('current');
        quizMain?.classList.add('current');
      };
    }
  
    if (quizExit) {
      quizExit.onclick = () => {
        quizPopup?.classList.remove('current');
        quizMain?.classList.remove('current');
      };
    }
  });
  

  这里的?.是可选链操作符，意思是如果quizPopup是null或undefined，就直接停止执行后面的代码，不会抛出错误。

方案2：检查选择器和HTML语法

• 仔细核对你的HTML代码，确保.quiz-btn、.exit-btn这些类名的元素确实存在，有没有拼写错误（比如大小写、多打了空格）。你提供的HTML里<div class="start-quiz-popup"></div少了闭合的>，这种小语法错误也可能导致DOM解析异常。
• 如果你的弹窗是动态生成的（比如通过JS后来添加到页面里），那一开始用querySelector肯定找不到，这时候推荐用事件委托（见方案3）。

方案3：使用事件委托（更健壮的写法）

事件委托是把事件绑定到父元素（甚至document）上，通过判断点击的目标元素来执行逻辑，适合动态生成的元素，也能避免找不到元素的错误：

document.addEventListener('DOMContentLoaded', function() {
  document.addEventListener('click', function(e) {
    // 判断点击的是不是quiz-btn
    if (e.target.matches('.quiz-btn')) {
      const quizPopup = document.querySelector('.start-quiz-popup');
      const quizMain = document.querySelector('.main');
      quizPopup?.classList.add('current');
      quizMain?.classList.add('current');
    } 
    // 判断点击的是不是exit-btn
    else if (e.target.matches('.exit-btn')) {
      const quizPopup = document.querySelector('.start-quiz-popup');
      const quizMain = document.querySelector('.main');
      quizPopup?.classList.remove('current');
      quizMain?.classList.remove('current');
    }
  });
});

这种写法不管元素是一开始就存在，还是后来动态添加的，都能正常触发逻辑，而且不会因为找不到元素而报错。

额外小建议 #

你提到想把current改成active，这个想法很好！active是前端里更通用的状态类名，后续维护起来更容易。

备注：内容来源于stack exchange，提问作者DJCave