在 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

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

换句话说，您应该使用 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>

Answer 2

您需要 return 来自函数的问候语字符串。

您不需要将 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>

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

display greeting according to current time in appendChild()

javascript

variables

appendchild