开发者问题收集

获取未捕获的 TypeError：无法设置 null 属性（设置“innerHTML”）[重复]

2023-07-11
1022
javascript datetime

我想将当前日期和时间放在一个范围内 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"> <script src="Exe3.js"></script> <title>HomePage</title>  
      <h1>Current Date is :: <span id="dateNow">XX</span></h1>
      <h1>Current Time is :: <span id="timeNow">XX</span></h1>

我的 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 = currDate.getHours(); let minute = currDate.getMinutes(); let second = currDate.getSeconds(); let timeString = hour+" : "+minute+" : "+second; console.log(timeString); document.getElementById("timeNow").innerHTML = timeString; }
    
    showDate(); showTime();

我收到以下错误

在此处输入图片描述

Uncaught Type Error: Cannot set properties of null (setting 'innerHTML')

我是 JavaScript 新手

2个回答

很高兴您已经开始了 JavaScript 之旅 :)！

您的代码的主要问题是，在运行脚本时， <span id="dateNow" /> 元素不存在。

解决此问题最直接的方法是将脚本移至 html 文件 (body) 的末尾。

我还建议始终使用 <body> 元素，并记得关闭 <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">
</head>
<body>
  <title>HomePage</title>
  <h1>Current Date is :: <span id="dateNow">XX</span></h1>
  <h1>Current Time is :: <span id="timeNow">XX</span></h1>
  <script type="text/javascript" src="script.js""></script>
</body>
</html>

此外，一个好的做法是在尝试为元素分配某些内容之前确保该元素存在，即： 

var dateNowElement = document.getElementById("dateNow");

if (dateNowElement) {
  dateNowElement.innerHTML = currDate;
} else {
  console.error('Element with id #dateNow was not found.');
  // Or however you want the error to be handled!
}
b00t
2023-07-11

此错误通常发生在 JavaScript 代码在 HTML 元素加载并可在 DOM 中访问之前执行时。就您而言，问题可能是您尝试在 HTML 中呈现“dateNow”和“timeNow”元素之前访问它们。

要解决此问题，您可以对 HTML 代码进行小幅调整。将包含 JavaScript 代码的脚本标记移至 body 元素的底部，就在结束标记之前。通过这样做，您可以确保在 HTML 元素加载后执行 JavaScript 代码。

以下是更新后的代码： 

<!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>
        <div id="dateNow">Current Date is </div>
        <div id="timeNow">Current Time is </div>
    
        <script src="Exe3.js"></script>
    </body>        
</html>

Js 代码 

function showDate() {
document.getElementById('dateNow').innerHTML = 'Current Date is : ' + new Date().toLocaleDateString();}
function showTime() {
let currDateTime = new Date();
let hour = currDateTime.getHours();
let minute = currDateTime.getMinutes();
let second = currDateTime.getSeconds();
document.getElementById('timeNow').innerHTML = 'Current Time is : ' + hour + ' : ' + minute + ' : ' + second;
}

setInterval(() => {
showDate();
showTime();
}, 1000);

通过将脚本移至 body 的底部，您可以确保仅在 DOM 中创建“dateNow”和“timeNow”元素后执行 JavaScript 代码。这应该可以解决“无法设置 null 属性”错误。

请确保保存对 HTML 和 JavaScript 文件的更改。进行这些调整后，尝试再次运行代码，错误应该可以解决。

Vaibhav
2023-07-11