为何触发Uncaught TypeError: Cannot set property 'innerHTML' of null？求时间代码调试

一、核心错误原因及修复 #

报错Uncaught TypeError: Cannot set property 'innerHTML' of null的本质是：你把JS脚本放在了<head>标签里，浏览器从上到下解析HTML时，执行JS代码的阶段，<div id="show">还没被渲染到DOM树里，document.getElementById("show")自然找不到元素，返回null，也就无法设置innerHTML。

有两种简单修复方式：

1. 移动脚本位置：把<script>标签移到<body>末尾（</body>之前），确保DOM元素先加载完成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="show"></div>
  <!-- 脚本移到此处 -->
  <script src="../js/date.js"></script>
</body>
</html>

2. 监听DOM加载事件：如果必须保留脚本在<head>里，就在JS中等待DOM加载完成后再执行逻辑：

function show() { /* 原函数代码不变 */ }
function check(i) { /* 原函数代码不变 */ }

// 等待DOM全部加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  var h = document.getElementById("show");
  h.innerHTML = show();
  setInterval(function() {
    h.innerHTML = show();
  }, 1000);
});

注：原JS代码里重复声明了var h = document.getElementById("show");，可以合并成一次，避免冗余。

二、其他代码问题及优化 #

1. check函数逻辑错误：原代码判断i < 0完全无效（时分秒都是0-59的正数），应该改为判断小于10时补0，比如9变成"09"：

function check(i) {
  if (i < 10) {
    i = "0" + i; // 注意是数字0，不是字母o
  }
  return i;
}

2. 时间字符串格式优化：原拼接的字符串会显示成2024year10month这类不规范格式，建议调整为易读样式：

// 英文格式示例
var t = "Today is: " + month + "/" + date + "/" + year + " " + day + " " + hour + ":" + minute + ":" + second;
// 中文格式示例
// var t = "今天是: " + year + "年" + month + "月" + date + "日 " + day + " " + hour + ":" + minute + ":" + second;

3. 星期数组错误：原数组里的"Saturday\n"多了换行符\n，会导致显示异常，需删除：

var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

三、修复后的完整代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Current Time</title>
</head>
<body>
  <div id="show"></div>
  <script src="../js/date.js"></script>
</body>
</html>

JS文件（date.js） #

function show() {
  var now = new Date();
  var year = now.getFullYear(),
    month = check(now.getMonth() + 1),
    date = check(now.getDate()),
    day = now.getDay(),
    hour = check(now.getHours()),
    minute = check(now.getMinutes()),
    second = check(now.getSeconds());

  var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  day = week[day];
  var t = "Today is: " + month + "/" + date + "/" + year + " " + day + " " + hour + ":" + minute + ":" + second;
  return t;
}

function check(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

var h = document.getElementById("show");
h.innerHTML = show();
setInterval(function() {
  h.innerHTML = show();
}, 1000);

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