отобразить приветствие по текущему времени в appendChild () - PullRequest
Новая
       9

отобразить приветствие по текущему времени в appendChild ()

0 голосов
/ 02 ноября 2018

Я создал h3 внутри div и теперь пытаюсь отобразить приветствие, соответствующее текущему времени суток. Он отображается в игре как 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>

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018

Вам необходимо вернуть строку приветствия из функции.

Вам не нужно добавлять H3 к DOM в greetCustomer(), что должно быть сделано вне функции. И все переменные, относящиеся ко времени, должны быть локальными по отношению к функции, поскольку их необходимо пересчитывать каждый раз, когда функция используется. 

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>
0 голосов
/ 02 ноября 2018

Вы ничего не возвращаете из своей функции; это решит вашу проблему.

В другой заметке вы должны использовать 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>
...