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>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>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!
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.