title: Color Change at Certain Time of Day not Working in Js
body: <p>So, basically, I've created some Javascript that after a certain time of day (certain hours) it will change the background color of the page. I got confused on how to go about doing it, but after asking on this site, I was able to be pointed in the right direction. </p>
  
  <p>Here is the code (Information about my problem is below the code):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//determines the bg color
   var curHour = new Date().getHours(); //finds the current hour
   var background = document.getElementById('myBody'); //gets background
   if (curHour &gt; 4 &amp;&amp; curHour &lt; 11){
    background.style.backgroundColor = "lightblue"; //Morning 
   }
   else if (curHour &gt; 11 &amp;&amp; curHour &lt; 17) {
    background.style.backgroundColor = "#3a9fe5"; //around afternoon
   }
   else if (curHour &gt; 17 &amp;&amp; curHour &lt; 21) {
    background.style.backgroundColor = "#102a55"; //evening
   }
   else {
    background.style.backgroundColor = "black"; //night
   }
  //Please note: this isn't ALL of the javascript, just the bit I'm using to change the color</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#myBody {
   background-color: lightSeaGreen; /*This is the default color      in case something goes wrong with the JS*/
   z-index: -999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;script src="JsSnow.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
   &lt;/head&gt;
   &lt;body id="myBody"&gt;
    &lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Okay my problem is when I view the page (It is currently around 11:30 am, where I am), the background color is showing up as black, eventhough black shouldn't show up until past 9pm (i.e. 21st hour)</p>
  
  <p>What i tried to do to fix the code was change the else statement for the black color to: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>else if (curHour &gt; 21 &amp;&amp; curHour &lt; 4) {
    background.style.backgroundColor = "black"; //night
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately, when I tried that, it caused everything else on the page to disappear , and made the page become its default color of lightSeaGreen.</p>
  
  <p>Oddly though, the page displayed the correct color before 11am, and yesterday it displayed the correct color for evening and night. . . </p>