制作数字时钟持续出现TypeError: Cannot set properties of null错误求助

你的代码报错核心原因是元素匹配方式不匹配：

• JavaScript中使用document.getElementById("hour")这类方法，需要HTML元素对应设置id属性，但你的HTML里时间元素用的是class属性（如<span class="hour">00</span>），导致方法找不到元素，返回null，无法设置innerHTML。

修复方案（二选一即可） #

方案1：修改HTML，将class改为id #

直接把对应元素的class替换成id，保持JS代码不变：

<div class="time">
  <span id="hour">00</span>
  <span>:</span>
  <span id="min">00</span>
  <span>:</span>
  <span id="sec">00</span>
  <span>am</span>
</div>

方案2：修改JavaScript，使用class选择器 #

保持HTML不变，改用document.querySelector()匹配class元素：

const Time = () => {
    let hrs = new Date().getHours()
    document.querySelector(".hour").innerHTML = hrs;
    let min = new Date().getMinutes();
    document.querySelector(".min").innerHTML = min;
    let sec = new Date().getSeconds();
    document.querySelector(".sec").innerHTML = sec;
}
Time();

额外优化建议 #

当前代码只执行一次Time()，时钟不会动态更新，建议加上setInterval实现每秒刷新，同时优化时间格式（补零、12小时制）：

const Time = () => {
    const date = new Date();
    let hrs = date.getHours();
    // 转换为12小时制
    const amPm = hrs >= 12 ? 'pm' : 'am';
    hrs = hrs % 12 || 12;
    // 补零确保两位数显示
    hrs = hrs.toString().padStart(2, '0');
    const min = date.getMinutes().toString().padStart(2, '0');
    const sec = date.getSeconds().toString().padStart(2, '0');

    document.querySelector(".hour").innerHTML = hrs;
    document.querySelector(".min").innerHTML = min;
    document.querySelector(".sec").innerHTML = sec;
    // 如果需要显示上下午，可给对应span加class后设置内容
    // document.querySelector(".am-pm").textContent = amPm;
}
// 每秒更新一次时间
setInterval(Time, 1000);
// 页面加载时立即执行一次
Time();

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