我不能用.innerHTML更改HTML。不断收到消息"cannot set innerHTML property of null"

我的javascript来获取日期和时间并将其放置在div中，如下所示：

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;
} 
print(todaysDate());

HTML 看起来像这样：

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

我不断收到错误消息"无法将内部HTML的属性设置为空"。帮助？非常感谢。我是初学者。

date-and-time是类名而不是id。你应该在元素中添加id，像这样使用，

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

或者改变你的函数，使用getElementsByClassName方法，看看这篇文章。

function print(message){
  var div1= document.getElementsByClassName("date-and-time");
  div1[0].innerHTML= message ;
 }

查找具有 id 的元素时，该元素必须存在。你用了类而不是 id。

假：

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

右：

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

您需要

使用querySelector按类而不是 id 选择元素

取代

var div1= document.getElementById("date-and-time");

由

var div1= document.querySelector(".date-and-time");

日期和时间是类名，您正在通过 ID 访问它。

将属性名称更改为 id 或通过类名或查询选择器访问元素。

相关内容

最新更新

热门标签：