Question

The innerHTML isn’t working in this JavaScript code.

var date = new Date();
var time = date.getHours();
var morning = document.p.getElementById("greeting").innerHTML="Good Morning ";
var afternoon = document.write =  "Good Afternoon ";
var evening = document.write = "Good evening";

if (time < 12){
    morning}
else if (time < 18){
afternoon}
else {evening};

The HTML code is

<p id="greeting"> </p>

I am trying to get the code to read “good morning” or “afternoon”, based on the time. The JavaScript is in an external file. It worked with document.write but in the external file, the greeting appears at the top of the page.

Here I am trying to set a

of ‘greeting’ based on time of day.

Answer 1

var afternoon = document.write = "Good afternoon";

What this does is to introduce a variable called afternoon and to set both it and the property write on document, which was previously a function call, to the string "Good afternoon".

At a later point in your code, you just write afternoon, which accesses the variable, but doesn’t do anything with it.

It looks like you want to do something like this:

var morning = function() { document.getElementById("greeting").innerHTML="Good Morning "; };
var afternoon = function() { document.getElementById("greeting").innerHTML="Good Afternoon "; };
var evening = function() { document.getElementById("greeting").innerHTML="Good evening"; };

if (time < 12) {
   morning();
} else if (time < 18) {
   afternoon();
} else {
   evening();
};

That is, the above would be the closest thing to your code, that is somewhat correct. I would still say that there is room for some improvement. Something like the following would make more sense to me:

var morning = 'Good Morning ';
var afternoon = 'Good Afternoon ';
var evening = 'Good evening';

if(time < 12) {
    document.getElementById("greeting").innerHTML = morning;
} else if (time < 18) {
    document.getElementById("greeting").innerHTML = afternoon;
} else {
    document.getElementById("greeting").innerHTML = evening;
}

Better yet, you could probably decide which message you want to use first, and then assign it, which would give you fewer places to change your code if you want to change where to output the greeting, for instance:

var messages = {
   morning: 'Good Morning ',
   afternoon: 'Good Afternoon ',
   evening: 'Good evening'
};

var greeting = time < 12 
    ? messages.morning 
    : time < 18 
        ? messages.afternoon 
        : messages.evening;

document.getElementById('greeting').innerHTML = greeting;