使用JavaScript设置innerHTML时报错‘Cannot set innerHTML property of null’求助

Hey there! That error pops up because your JavaScript can't locate the element you're trying to target—let's break down the issues and fix them step by step.

1. Mismatched Element Selector #

The core problem here is a mix-up between id and class attributes:

• In your JavaScript, you're using document.getElementById("date-and-time") to grab the element by its id.
• But in your HTML, the div only has a class attribute: <div class="date-and-time">

You have two simple fixes for this:

Option A: Update the HTML to use an id #

Change your div tag to target the correct identifier:

<div id="date-and-time"></div>

Option B: Update the JavaScript to use a class selector #

Modify the print function to use querySelector (which works with class names):

function print(message){ 
  var div1= document.querySelector(".date-and-time"); 
  div1.innerHTML= message ; 
}

2. Ensure the DOM is Ready Before Running Script #

While your current script is placed at the end of the <body> (which helps), it's a solid practice to wrap your code in a DOMContentLoaded event listener. This guarantees the entire page is loaded before your JavaScript runs, preventing issues if you ever move the script to the <head> later:

Update your JavaScript like this:

function print(message){ 
  var div1= document.getElementById("date-and-time"); 
  div1.innerHTML= message ; 
}
function addZero(i) { 
  if (i < 10) {i = "0" + i;} 
  return i; 
}
function todaysDate (){ 
  var today= new Date(); 
  var day= today.getDay(); 
  var daylist=["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"]; 
  var whatDayTime = "<p> Today is " + daylist[day] + ". </p>"; 
  var hour= addZero(today.getHours()); 
  var minute= addZero(today.getMinutes()); 
  var second= addZero(today.getSeconds()); 
  whatDayTime += "<p> The time is " + hour + ":" + minute+ ":" + second + ". </p>"; 
  return whatDayTime; 
}

// Wait for the DOM to fully load before executing
document.addEventListener('DOMContentLoaded', function() {
  print(todaysDate());
});

Final Working Code Example #

HTML #

<!DOCTYPE html>
<html>
<head>
<title>Practice JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="date-and-time"></div>
<script src="practice.js"></script>
</body>
</html>

JavaScript #

function print(message){ 
  var div1= document.getElementById("date-and-time"); 
  div1.innerHTML= message ; 
}
function addZero(i) { 
  if (i < 10) {i = "0" + i;} 
  return i; 
}
function todaysDate (){ 
  var today= new Date(); 
  var day= today.getDay(); 
  var daylist=["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"]; 
  var whatDayTime = "<p> Today is " + daylist[day] + ". </p>"; 
  var hour= addZero(today.getHours()); 
  var minute= addZero(today.getMinutes()); 
  var second= addZero(today.getSeconds()); 
  whatDayTime += "<p> The time is " + hour + ":" + minute+ ":" + second + ". </p>"; 
  return whatDayTime; 
}

document.addEventListener('DOMContentLoaded', function() {
  print(todaysDate());
});

Give that a try—your date and time should display without errors now!

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