在appendChild()中根据当前时间显示问候语

Question

我在div中创建了一个h3，现在正试图显示适合当前时间的问候语。它在剧中显示为h3，但只会导致未定义。

有人能告诉我我错过了什么或做错了什么吗？

var h3 = document.createElement("h3");
var d = new Date();
var hour = d.getHours();
var greeting;
function greetCustomer() {
if (hour > 18) {
greeting = "Good Evening";
}

else if (hour > 12) {
greeting = "Good Afternoon";
}

else if (hour > 5) {
greeting = "Good Morning";
}

else {
greeting = "Welcome Night Owl";
} 

document.getElementById("greeting").appendChild(h3);
}
h3.innerHTML = greetCustomer();

<div id="greeting"></div>

Answer 1

您需要从函数返回问候字符串。

您不需要将H3附加到greetCustomer()中的DOM，这应该在函数之外完成。所有与时间相关的变量都应该是函数的局部变量，因为每次使用函数时都需要重新计算它们。

var h3 = document.createElement("h3");
document.getElementById("greeting").appendChild(h3);
h3.innerHTML = greetCustomer();
function greetCustomer() {
var d = new Date();
var hour = d.getHours();
var greeting;
if (hour > 18) {
greeting = "Good Evening";
} else if (hour > 12) {
greeting = "Good Afternoon";
} else if (hour > 5) {
greeting = "Good Morning";
} else {
greeting = "Welcome Night Owl";
}
return greeting;
}

<div id="greeting"></div>

Answer 2

您没有从函数中返回任何内容；这将解决你的问题。

另一方面，您应该使用textContent而不是innerHTML。您可能应该在greetCustomer()函数之外附加h3。

function greetCustomer() {
var d = new Date();
var hour = d.getHours();
var greeting;
if (hour > 18) {
greeting = "Good Evening";
} else if (hour > 12) {
greeting = "Good Afternoon";
} else if (hour > 5) {
greeting = "Good Morning";
} else {
greeting = "Welcome Night Owl";
}
return greeting;
}
var h3 = document.createElement("h3");
h3.textContent = greetCustomer();
document.querySelector('#greeting').appendChild(h3);

<div id="greeting"></div>