Странное поведение JavaScript getElementById

Question

У меня есть следующий сценарий:

var greet; 
    var now = new Date(); 
    var curHours = now.getHours(); 
    if (curHours >=4 && curHours <12) { 
    greet = "Good morning, "; 
    document.getElementById("greetTxt").innerHTML = greet; 
    } 
    else if (curHours >=12 && curHours <18) { 
    document.getElementById("greetTxt").innerHTML = greet; 
    greet = "Good day, "; 
    } 
    else if (curHours >=18 && curHours <24) { 
    document.getElementById("greetTxt").innerHTML = greet; 
    greet = "Good evening, "; 
    } 
    else if (curHours >=24 && curHours <4) { 
    document.getElementById("greetTxt").innerHTML = greet; 
    greet = "Good night, "; 
    } 
    else { 
    document.getElementById("greetTxt").innerHTML = greet; 
    greet = "Hey, "; 
    } 
    document.write (greet); 

document.write работает нормально, но в промежутке, когда второе условие начала работать else if (curHours >=12 && curHours <18) я неопределенными в пролете.

<span id="greetTxt"></span> 

Почему так? Первое условие работает нормально. Местное время, когда ошибка произошла 13:30.

Answer 1

вместо

else if (curHours >=12 && curHours <18) { 
    document.getElementById("greetTxt").innerHTML = greet; 
    greet = "Good day, "; 
} 

использования

else if (curHours >=12 && curHours <18) { 
    greet = "Good day, "; 
    document.getElementById("greetTxt").innerHTML = greet; 

} 

Поскольку Приветствуйте не имеет значение, присвоенное ему. Поэтому для каждого условия назначьте приветствие frist, а затем поместите его во внутренний html

Answer 2

Вы определяете значение перед определением переменной greet, таким образом, вы получаете undefined.

Итак, сначала необходимо определить значение, а затем присвоить его в innerHTML как:

var greet; 
    var now = new Date(); 
    var curHours = now.getHours(); 
    if (curHours >=4 && curHours <12) { 
    greet = "Good morning, "; 
    document.getElementById("greetTxt").innerHTML = greet; 
    } 
    else if (curHours >=12 && curHours <18) { 
     greet = "Good day, "; 
     document.getElementById("greetTxt").innerHTML = greet; 

     } 
     else if (curHours >=18 && curHours <24) { 
     greet = "Good evening, "; 
     document.getElementById("greetTxt").innerHTML = greet; 

     } 
     else if (curHours >=24 && curHours <4) { 
     greet = "Good night, "; 
     document.getElementById("greetTxt").innerHTML = greet; 

     } 
     else { 
     greet = "Hey, "; 
     document.getElementById("greetTxt").innerHTML = greet; 
     } 

Answer 3

Запись повторен код не является хорошей практикой. Назначьте переменную greet на основании условия и поместите ее в .innerHTML.

Попробуйте это:

var greet; 
var now = new Date(); 
var curHours = now.getHours(); 
if (curHours >=4 && curHours <12) { 
    greet = "Good morning, "; 
} 
else if (curHours >=12 && curHours <18) { 
    greet = "Good day, "; 
} 
else if (curHours >=18 && curHours <24) { 
    greet = "Good evening, "; 
} 
else if (curHours >=24 && curHours <4) { 
    greet = "Good night, "; 
} 
else { 
    greet = "Hey, "; 
} 
document.getElementById("greetTxt").innerHTML = greet; 
document.write (greet);