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

【问题标题】：Displaying morning, afternoon, or evening to user based on time using variables使用变量根据时间向用户显示上午、下午或晚上
【发布时间】：2017-12-17 18:49:45
【问题描述】：

我想说“早上好，用户”（早上可以更改为下午或晚上）我的代码不起作用。如有任何帮助，我将不胜感激。

index.html sn-p

 <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 的菜鸟。

我也想知道这个错误是什么意思（来自谷歌浏览器控制台）：

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

【问题讨论】：

请发布您的整个代码，包括链接 JS 文件的部分。
注意：您不需要在每次使用变量的前面加上var。您只需要在开始时声明一次变量。
每个 var 声明也应该以分号结尾。
@JonathanChaplin inimino.org/~inimino/blog/javascript_semicolons

标签： javascript html time

【解决方案1】：

如果您在跨度之前链接 javascript 文件，则 Uncaught TypeError: Cannot set property 'innerHTML' of null at master.js:13 将发生，因为它还找不到跨度。试试：

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

【讨论】：

@SmocksMCM 很好，如果它解决了它，它会点击答案左侧的复选标记。欢迎来到 StackOverflow :)。
@SmocksMCM：比上面更好的方法是确保您的script 标签位于正文的end，就在关闭</body> 标签之前.窗口load 事件发生在页面加载过程的后期非常，在所有图像和其他辅助资源都加载之后。这几乎不是正确的答案。
@T.J.Crowder 我同意 JS 应该放在最后，尽管我觉得你永远不应该依赖在构建页面时运行的代码。在我看来，最佳实践始终是在onload 中编写代码。无论如何，您的链接与其他链接看起来更干净，并且所有链接都同时下载，因此您不会收到断断续续的页面加载。不客气，我知道你比我高。
@pepperjack：（代表无关）您当然可以有自己的意见，但是将脚本放在底部是非常完善的（多年来一直如此），确实加快了明显的页面加载时间（您可以使用async/defer 来缓解这种情况，但会带来复杂性），并且没有问题或以任何方式不可靠。更多：developer.yahoo.com/performance/rules.html#js_bottom 相比之下，使用 load 运行脚本太晚了，给用户在运行之前留出大量时间。
@T.J.Crowder 谢谢你的链接，看起来很有趣。稍后我会读一读。