How to make it so that a different text shows up depending on the current time

user_16600813 0
Viewed 89

So to do a little background first, I'm studying javascript in a free online course because I thought that knowing how to code would be ahem cool and useful in the future. Currently done 55% of the course, and thought of applying what I learned so far to create a new tab extension. My idea is for the text to change depending on the time, after researching I learned about the Date Object, then after an hour, the code in the code snippet is the final result..it was only later I found out that the 'Good Morning' did not change after the clock hit 12, tried using different operators as well as loops, but the result is either the same or an error. Sorry if this is a stupid question but how do I make it so that the text changes from 'Good Morning' to 'Good Afternoon' when it hits 12 and 'Good Evening' when it hits 7:00/19?

function getDateTime() { 
    let date = new Date(); 
    let hour = date.getHours(); 
   if (hour >= 6) {
    document.getElementById('d').innerHTML = "Good Morning";
  } else if (hour >= 12) {
    document.getElementById('d').innerHTML = "Good Afternoon";
  } else if (hour >= 19) {
    document.getElementById('d').innerHTML = "Good Evening";
  } else if (hour >= 0) {
    document.getElementById('d').innerHTML = "Go to sleep soon";
  } else if (hour >= 2) {
    document.getElementById('d').innerHTML = "You should consider going to sleep";
  } else if (hour >= 3) {
     document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
  } else {
     document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
  }
}
getDateTime()
h1 {
  text-align: center;
  position: relative;
  font-size: 50px;
}
<h1 id="d">

</h1>

javascript
4 Answers

When you have a series of if/else if conditions, the first condition that's met will be used.

When it's after 12, it's also after 6, so the condition hour >= 6 will be true, and that's the output you'll get. It will never check hour >= 12 because a condition has already been met.

So you should order your conditions in order of specificity. In this case, that means in decreasing order of hours.

function getDateTime() {
  let date = new Date();
  let hour = date.getHours();
  if (hour >= 19) {
    document.getElementById('d').innerHTML = "Good Evening";
  } else if (hour >= 12) {
    document.getElementById('d').innerHTML = "Good Afternoon";
  } else if (hour >= 6) {
    document.getElementById('d').innerHTML = "Good Morning";
  } else if (hour >= 3) {
    document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
  } else if (hour >= 2) {
    document.getElementById('d').innerHTML = "You should consider going to sleep";
  } else if (hour >= 0) {
    document.getElementById('d').innerHTML = "Go to sleep soon";
  } else {
    document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
  }
}
getDateTime()
h1 {
  text-align: center;
  position: relative;
  font-size: 50px;
}
<h1 id="d">

</h1>

user_14918950

See your first if statement:

if (hour >= 6) { ...
}

If the hour is 11pm (or 23:00 for 24h time).. isn't that also >= 6?

You have to order the ifs so the statements don't "overlap" with each other.

Otherwise the code is nice, have fun learning JavaScript!

user_104416710

when checking if a number is >= something, keep in mind you always need to check the highest number FIRST and then work down from there. in your example, if the number is say 14, it's going to fire the very first condition (14 >= 6)

if (hour >= 6) {
  document.getElementById('d').innerHTML = "Good Morning";
} else if (hour >= 12) {
  document.getElementById('d').innerHTML = "Good Afternoon";
}

instead it should be written like this:

if (hour >= 12) {
  document.getElementById('d').innerHTML = "Good Morning";
} else if (hour >= 6) {
  document.getElementById('d').innerHTML = "Good Afternoon";
}

and continue from there.

user_122715690

You are using if-else conditions in wrong way either put a <=condition or just sort them in decreasing order also if you want to update it on its own you just have to add setInterval() function at the beginning of your js code

setInterval(getDateTime, time);

in place of time you have to add time in 1000 ( 1000 = 1 second) according to your need.

for example

setInterval(getDateTime(),1000);
function getDateTime() {
  let date = new Date();
  let hour = date.getHours();
  if (hour >= 19) {
    document.getElementById('d').innerHTML = "Good Evening";
  } else if (hour >= 12) {
    document.getElementById('d').innerHTML = "Good Afternoon";
  } else if (hour >= 6) {
    document.getElementById('d').innerHTML = "Good Morning";
  } else if (hour >= 3) {
    document.getElementById('d').innerHTML = "GO. TO. SLEEP.";
  } else if (hour >= 2) {
    document.getElementById('d').innerHTML = "You should consider going to sleep";
  } else if (hour >= 0) {
    document.getElementById('d').innerHTML = "Go to sleep soon";
  } else {
    document.getElementById('d').innerHTML = "If you see this, something is wrong with the code";
  }
}
getDateTime()

I hope this might help Thankyou

user_166961610
Related