JS实现时间展示时报Cannot set properties of null (setting 'innerHTML')错误求解

报错原因解析 #

这个报错的本质是执行clock.innerHTML = currtime代码时，clock的值为null，即document.getElementById("clock")没有匹配到对应id的DOM元素。你提到时间可以正常显示，说明第一次printTime调用时DOM已经加载完成、可以正常获取到元素，报错是后续定时器重复调用时触发的，常见的触发原因如下：

• setTimeout传参写法不规范
  你当前给setTimeout传入的是字符串"printTime()"，这种写法等价于在全局作用域下执行eval调用，非常容易出现作用域异常。如果你的JS代码没有暴露在全局作用域（比如被包裹在匿名函数、ES模块、CommonJS模块中），后续定时执行时上下文异常，就可能出现元素获取失败的问题。
• DOM元素被意外修改
  其他业务JS代码操作了DOM树：比如移除了id为clock的元素、修改了该元素的id属性、用innerHTML重写了它的父级容器导致该元素被覆盖替换，都会导致后续getElementById返回null。
• 单页应用场景的定时器未清理
  如果是在Vue、React等单页应用的子页面中写的该功能，路由跳转到其他页面后，原页面的clock元素会被销毁，但你没有手动清除定时器，定时器还会持续调用printTime，就会持续抛出该错误。

修复方案 #

修改setTimeout的传参方式，同时增加元素存在性判断，避免元素不存在时报错：

function printTime() {
  let clock = document.getElementById("clock"); 
  // 元素不存在时直接终止执行，避免报错
  if (!clock) return
  let curr = new Date();
  let currtime =
    curr.getFullYear() + "/" + (curr.getMonth() + 1) + "/" + curr.getDate();
  clock.innerHTML = currtime;
  // 直接传入函数引用，不要使用字符串形式
  setTimeout(printTime, 1000);
}

window.onload = function () {
  printTime();
};

如果是单页应用场景，需要在页面卸载的生命周期钩子中调用clearTimeout清除对应的定时器。

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