根据时间使用变量向用户显示上午、下午或晚上

Question

我想说“早上好，用户”(早上可以改为下午或晚上)我的代码不起作用。如果能提供任何帮助，我将不胜感激。

index.html片段

 <h1 class="mx-3 text-center display-3">Good <span id="time"></span>, Username</h1>

master.js

var today = new Date()
var curHr = today.getHours()
var time = null;

if (curHr < 12) {
  var time = "Morning";
} else if (curHr < 18) {
  var time = "Afternoon";
} else {
  var time = "Evening";
}

document.getElementById("time").innerHTML = time;

抱歉，我是javascript的菜鸟。

我还想知道这个错误意味着什么(来自google chrome控制台)：

Uncaught TypeError: Cannot set property 'innerHTML' of null
    at master.js:13

Answer 1

如果在span之前链接javascript文件，那么Uncaught TypeError: Cannot set property 'innerHTML' of null at master.js:13就会出现，因为它还找不到span。尝试：

window.onload = function(e){ 
    document.getElementById("time").innerHTML = time;
}