JS新手遇Uncaught TypeError：无法设置null的innerHTML属性

1. 修复DOM加载时机问题 #

你把<script src="Exe3.js"></script>放在了<head>标签里，浏览器会优先加载执行JS代码，这时候HTML里的<span id="dateNow">和<span id="timeNow">还没被渲染到DOM中，document.getElementById()找不到对应元素就会返回null，自然就报出"Cannot set properties of null"的错误。

有两种解决方式：

• 方式一：把脚本移到body末尾
  修改HTML结构，将脚本放在</body>标签前，确保DOM元素先加载完成：

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>HomePage</title>  
</head>
<body>
  <h1>Current Date is :: <span id="dateNow">XX</span></h1>
  <h1>Current Time is :: <span id="timeNow">XX</span></h1>
  <script src="Exe3.js"></script>
</body>
</html>

• 方式二：用DOMContentLoaded事件包裹函数调用
  如果不想移动脚本位置，就在JS里等DOM完全加载后再执行函数：

function showDate(){
  let currDateTime = new Date();
  let currDate = currDateTime.toLocaleDateString();
  console.log(currDate);
  document.getElementById("dateNow").innerHTML = currDate;
}

function showTime(){ 
  let currDateTime = new Date(); 
  // 修正变量名错误，把currDate改成currDateTime
  let hour = currDateTime.getHours(); 
  let minute = currDateTime.getMinutes(); 
  let second = currDateTime.getSeconds(); 
  let timeString = hour+ " : "+minute+ " : "+second; 
  console.log(timeString); 
  document.getElementById("timeNow").innerHTML = timeString; 
}

// 等待DOM加载完成后再触发函数
document.addEventListener('DOMContentLoaded', function() {
  showDate(); 
  showTime();
});

2. 修复showTime函数的变量名错误 #

你的showTime函数里，定义的是currDateTime = new Date()，但后续调用getHours()等方法时用的是currDate，这是变量名写错了，会导致currDate is not defined的错误，必须把所有currDate改成currDateTime。

最终可运行的完整代码 #

HTML文件： #

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>HomePage</title>  
</head>
<body>
  <h1>Current Date is :: <span id="dateNow">XX</span></h1>
  <h1>Current Time is :: <span id="timeNow">XX</span></h1>
  <script src="Exe3.js"></script>
</body>
</html>

Exe3.js文件： #

function showDate(){
  let currDateTime = new Date();
  let currDate = currDateTime.toLocaleDateString();
  console.log(currDate);
  document.getElementById("dateNow").innerHTML = currDate;
}

function showTime(){ 
  let currDateTime = new Date(); 
  let hour = currDateTime.getHours(); 
  let minute = currDateTime.getMinutes(); 
  let second = currDateTime.getSeconds(); 
  // 给时间补零，让格式更规范（比如9点变成09点）
  hour = hour.toString().padStart(2, '0');
  minute = minute.toString().padStart(2, '0');
  second = second.toString().padStart(2, '0');
  let timeString = `${hour} : ${minute} : ${second}`; 
  console.log(timeString); 
  document.getElementById("timeNow").innerHTML = timeString; 
}

showDate(); 
showTime();

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