onmousemove绑定报错：Uncaught TypeError，本地运行失败但Codepen正常

错误原因 #

你的JS代码执行时机早于DOM元素加载完成，导致document.querySelector('.btn')找不到目标元素，返回null，自然无法给null设置onmousemove属性。Codepen默认会自动处理脚本加载时机，所以不会出现这个问题，本地VSCode环境需要手动控制执行时机。

解决方案 #

方案1：将JS脚本放在HTML末尾

把外部JS文件的引用或者内联JS代码放在</body>标签之前，确保DOM元素先加载完成：

<body>
  <a href="#" class="btn"><span>Button</span></a>
  <!-- 脚本放在这里 -->
  <script src="js.js"></script>
</body>

方案2：用DOMContentLoaded事件包裹代码

让JS代码等待DOM全部加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  const btn = document.querySelector('.btn');
  btn.onmousemove = function (e) {
    const x = e.pageX - btn.offsetLeft;
    const y = e.pageY - btn.offsetTop;

    btn.style.setProperty('--x', x + 'px');
    btn.style.setProperty('--y', y + 'px');
  };
});

方案3：给script标签添加defer属性

在引入外部JS文件的script标签上加上defer，脚本会在DOM加载完成后执行：

<script src="js.js" defer></script>

验证修改效果 #

任意选择一种方案修改后，重新运行页面，鼠标移动到按钮上时，应该能正常显示蓝色扩散效果，不会再出现报错。

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