在 HTML 上使用 JS 设置问候语时遇到问题

Trouble with setting greeting note with JS on HTML

我在 运行 从 HTML 页面上的单独样式表中获取 JS 代码时遇到问题。基本上,我想根据一天中的当前时间设置足够的问候语。我已经搜索过,有很多方法可以做到这一点,但我试图以这种方式让它工作,但我没有找到解决这个问题的方法。

window.onload = getGreeting();
    function getGreeting() {
    var time = new Date();
    var curHours = time.getHours();
    if (curHours < 10) {
        document.getElementById("greeting").innerHTML = "Dobro jutro!";
    } if else (curHours < 20) {
        document.getElementById("greeting").innerHTML = "Dobar dan!";
    } if else {
        document.getElementById("greeting").innerHTML = "Dobro vece!";
    }
};
<!DOCTYPE html>

<head>
<script type="text/javascript" src="LakaRukaDent.js"></script> 
</head>

<body>
<p id="greeting"></p>
</body>

当我 运行 HTML 在 Chrome 时,问候语没有出现。当我在 Chrome 中按 f12 时,出现“Uncaught SyntaxError: Unexpected token <”,但我不明白为什么它不起作用。我已经检查了通过网络搜索的语法和功能,但考虑到我是 JS 的新手,HTML 也许它可能是我跳过但我不知道的一些基本内容。

使用 else if 而不是 if else。 来自 MDN 的示例:

if (x > 5) {

} else if (x > 50) {

} else {

}

请在下面找到修复方法。 window.onload 期望函数引用不是函数的返回值,这就是为什么我删除了那里的括号。 if else 语句也存在语法错误。

window.onload = getGreeting;
        function getGreeting() {
        var time = new Date();
        var curHours = time.getHours();
        if (curHours < 10) {
            document.getElementById("greeting").innerHTML = "Dobro jutro!";
        } else if (curHours < 20) {
            document.getElementById("greeting").innerHTML = "Dobar dan!";
        } else {
            document.getElementById("greeting").innerHTML = "Dobro vece!";
        }
    };
<h1 id="greeting"></h1>

首先,在分配给 onload 时从 getGreeting 中删除括号,因为 onload 接受一个函数。此外,您的 if 语句存在语法错误。它应该是 else if 而不是 if else 像这样:

window.onload = getGreeting;
    function getGreeting() {
    var time = new Date();
    var curHours = time.getHours();
    if (curHours < 10) {
        document.getElementById("greeting").innerHTML = "Dobro jutro!";
    } else if (curHours < 20) {
        document.getElementById("greeting").innerHTML = "Dobro dan!";
    } else {
        document.getElementById("greeting").innerHTML = "Dobro vece!";
    }
}
<p id="greeting"></p>