My first IF doesn't work, but my else if and else parts work javascript

Question

I am having an issue. My first IF statement doesn't work, but my ELSE IF and my ELSE statements do work, and I can't figure out why.

(function(){
    var dateHeure = new Date().getHours();
    var dateHeure = dateHeure.toString();
    var $p = document.querySelectorAll('.change')[0];

    console.log($texte);

    if (dateHeure >= "6" && dateHeure < "11"){
      $texte = "Good morning";
    }
    else if (dateHeure >= "11" && dateHeure < "14"){
      $texte = "Enjoy your meal";
    }
    else if (dateHeure >= "14" && dateHeure < "18"){
      $texte = "Good afternoon";
    }
    else if (dateHeure >= "18" && dateHeure < "22"){
     $texte = "Good evening";
    }
    else {
      $texte = "Good night";
    }
    $p.innerHTML=$texte + ", World";
})();

EDIT :

Here is the code that works perfectly for me. I did like you all said, I stopped turning the hours into strings, and now it's ok :

(function(){
var dateHeure = new Date().getHours();
var dateHeure = dateHeure.toString();
var $p = document.querySelectorAll('.change')[0];
var $texte = "";


if (dateHeure >= 6 && dateHeure < 11){
  $texte = "Good morning";
}
else if (dateHeure >= 11 && dateHeure < 14){
  $texte = "Enjoy your meal";
}
else if (dateHeure >= 14 && dateHeure < 18){
  $texte = "Good afternoon";
}
else if (dateHeure >= 18 && dateHeure < 22){
  $texte = "Good evening";
}
else {
  $texte = "Good night";
}
$p.innerHTML=$texte + ", World";
})();

why converting numbers to strings, if you need numbers to compare? — Nina Scholz, Jul 06 '16 at 09:08

Nina Scholz · Answer 1 · 2017-11-26T16:57:05.353

While you already know, what the problem is,

why converting numbers to strings, if you need numbers to compare?

I suggest to use a different kind of comparing without repeating some parts.

You start the comparison with a very small value (before 6 o'clock) and go upwards to the end of the day. You need now only the check for smaller. Greater or equal checks are not necessary.

(function () {
    var dateHeure = new Date().getHours(),
        texte;

    if (dateHeure < 6) {
        texte = "Good night";
    } else if (dateHeure < 11) {
        texte = "Good morning";
    } else if (dateHeure < 14) {
        texte = "Enjoy your meal";
    } else if (dateHeure < 18) {
        texte = "Good afternoon";
    } else if (dateHeure < 22) {
        texte = "Good evening";
    } else {
        texte = "Good night";
    }
    console.log(texte + ", World");
})();

This is really clean and nicely done. I feel this deserves to be the chosen answer. — DibsyJr, Jul 06 '16 at 10:02

score 0 · Answer 2 · answered Jul 06 '16 at 09:11

You are using strings instead of numbers. Consider if the value was "7", then "7" > "6" is true, but "7" < "11" is false because the strings are compared character by character.

Simply remove the line var dateHeure = dateHeure.toString(); and change all the comparisons to use numbers and then the code should work as you expect.

DibsyJr · Answer 3 · 2016-07-06T09:25:44.487

The problem is that you're converting integers to strings and then trying to check that string against a range, but there is no range to compare to in this case.

The only way to do a range of strings, is by storing the strings in an array or similar and then comparing the current string (your time) against each of those entries. However I advise against doing this as it seems to be a long winded way of getting what you want.

Your else if's I imagine would only work under very specific conditions such as the current time being "11" but this would apply to the if statement if the current time were "6". But the else would work because it is executed in a case where all of the if statements failing (which would be in most cases). However, if you want it to work I suggest using it like this:

(function(){
var dateHeure = new Date().getHours();
var $p = document.querySelectorAll('.change')[0];

console.log($texte);

if (dateHeure >= 6 && dateHeure < 11){
  $texte = "Good morning";
}
else if (dateHeure >= 11 && dateHeure < 14){
  $texte = "Enjoy your meal";
}
else if (dateHeure >= 14 && dateHeure < 18){
  $texte = "Good afternoon";
}
else if (dateHeure >= 18 && dateHeure < 22){
  $texte = "Good evening";
}
else {
  $texte = "Good night";
}
$p.innerHTML=$texte + ", World";
})();

Here I am getting the number of hours from the date, like you were, but not converting it to a string and instead comparing it against a range of integer values (for example greater than or equal to 6 and less than 11).

Ace T · Answer 4 · 2016-07-06T11:28:17.170

You are performing a string comparison on a value that you want to compare as a number. That is an accident waiting to happen (as you are finding out).

Date.getHours() gives you an Integer value and should be used as such for your goal, this works perfectly:

<p class="change"></p>
<script>
var $texte;
(function(){
var dateHeure = new Date().getHours();
//dateHeure = 10; // for testing
//dateHeure = dateHeure.toString(); // don't !
var $p = document.querySelectorAll('.change')[0];

console.log($texte);

if (     dateHeure <  6
      || dateHeure >=22) { $texte = "Good night"; }
else if (dateHeure < 11) { $texte = "Good morning"; }
else if (dateHeure < 14) { $texte = "Enjoy your meal"; }
else if (dateHeure < 18) { $texte = "Good afternoon"; }
else                     { $texte = "Good evening"; }

$p.innerHTML=$texte + ", World";
})();
</script>

My first IF doesn't work, but my else if and else parts work javascript

4 Answers4