addEventListener与window.onload拆分到script.js后失效报错排查

拆分独立JS文件后触发Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')报错，核心原因是JS执行时机早于DOM渲染完成：你在代码顶层直接调用document.getElementById获取按钮元素时，浏览器还没解析到对应的DOM节点，拿到的返回值是null，后续给null绑定点击事件自然会抛出类型错误。
之前单文件能正常运行，是因为你之前把JS代码写在了HTML所有DOM元素的末尾，浏览器先解析完所有页面元素再执行JS，不会出现拿不到元素的情况。

把所有DOM查询、事件绑定、页面初始化的逻辑，全部放到DOM加载完成的回调里执行，不要在全局顶层直接操作DOM，修正后代码参考：

// 提前声明全局变量，避免隐式全局变量造成的异常
let countInterval;
let speed = 0;

window.onload = function() {
  // DOM加载完成后再获取元素、绑定事件
  const buttonStart = document.getElementById("forward");
  const buttonStop = document.getElementById("stop");
  const speedShow = document.getElementById("speed");

  buttonStart.addEventListener("click", speedup);
  buttonStop.addEventListener("click", stopspeed);

  // 页面初始化逻辑直接在这里执行
  start();

  function speedup() {
    clearInterval(countInterval);
    speed += 1;
    countInterval = setInterval(valuecalc, 1000 / speed);
    speedShow.innerHTML = speed;
  }

  function stopspeed() {
    clearInterval(countInterval);
    speed = 0;
    speedShow.innerHTML = speed;
  }
}

• 原代码里var starts = start();写法逻辑错误：这行代码会在JS加载时立刻执行start()，完全等不到window.onload触发，很容易触发额外的DOM操作错误，直接把初始化逻辑放到onload回调里即可，不需要额外给执行结果赋值变量。
• 原代码里的Interval、speed变量没有显式声明，属于隐式全局变量，容易出现作用域污染导致的偶发bug，建议提前显式声明。
• 如果是通过HTML的<script>标签引入外部JS，也可以给标签添加defer属性，告诉浏览器等DOM解析完成后再执行该JS文件，写法为<script src="script.js" defer></script>，同样能解决执行时机过早的问题。

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