I am making an if statement that executes using variables based on the Date() function, but the if statement doesn't appear to prevent execution when it should. The code block is intended to reveal one among a set of possible paragraphs when the time is right. Here is my script
<script>
const D = new Date();
var m = D.getMinutes();
var h = D.getHours();
function showMessage() {
if ((0 < h <= 5) || ((h == 6) && (m == 0))) {
document.getElementById("m1").classList.remove("message");
} else if (((6 == h) && (m != 0)) || (6 < h < 12) || ((h == 12) && (m == 0))) {
document.getElementById("m2").classList.remove("message");
} else if (((12 == h) && (m != 0)) || (12 < h < 18) || ((h == 18) && (m == 0))) {
document.getElementById("m3").classList.remove("message");
} else {
document.getElementById("m4").classList.remove("message");
}
}
showMessage();
</script>
Here is the relevant HTML block:
<div id="messagecontainer">
<p class="message" id="m1">Good morning, you must be an early bird!</p>
<p class="message" id="m2">Good morning</p>
<p class="message" id="m3">Good afternoon</p>
<p class="message" id="m4">Good evening</p>
</div>
And here is the CSS that makes it work:
.message {
display: none;
}
As you can see, when the "message" class is removed from any paragraph, the paragraph should be revealed. I know this part works but the problem is that, it's always revealing the id="m1" paragraph when it shouldn't be. It should only be excuting from 1am (this is a mistake I just noticed and will fix) to 6pm. Otherwise it should go to as many else if statements as necessary until the time is right and the correct text block executes. For example, it is 3:30pm (15h30m) now and therefore the third block with the "m3" paragraph should be showing. But it's still the "m1".
The only things I can think of are that I somehow botched the syntax on the if statements or otherwise the variable scope isn't allowing me access to the variables within the if statements (I believe they should be global but I could be wrong). Can anyone see the problem?
This doesn't do what you think it does:
(0 < h <= 5)
This will evaluate one of the conditions first, then use the result of that condition to evaluate the second one. So you're essentially doing this:
(false <= 5)
Which would be true.
Separate the logical conditions explicitly:
((0 < h) && (h <= 5))
You are writing some conditions that don't work as expected (they work in mathematical notation, but not when writing code).
Take this for example 0 < h <= 5. It will get executed in steps
0 < 5. This can either be true or falsetrue < 5 or false < 5, both of which will end up being evaluated to true. This is because of how JS converts some values when doing boolean or math operationsYou need to split all of this in something like this 0 < h && h <= 5
The first if statement will always result to true
(0 < h <= 5) is equal to ((0 < h) <= 5) and you can check that it will be always true
In JavaScript, to check if a number is between two numbers (what in regular math would be n1 < x < n2), you have to use the && operator
(0 < h) && (h <= 5)
so:
(0 < h <= 5) || ((h == 6) && (m == 0)) is equal to
((0 < h) <= 5) || ((h == 6) && (m == 0))
which is not what you intended because the first two parenthesis will always result in a true value.
What you want is that:
((0 < h) && (h <= 5)) || ((h == 6) && (m == 0))