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。并且您可能应该在h3函数之外附加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;
}

var h3 = document.createElement("h3");
h3.textContent = greetCustomer();
document.querySelector('#greeting').appendChild(h3);

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

根据appendTime（）中的当前时间显示问候语

2 个答案: