Else if statment not working

Question

I've been having a tough time with this code I've been working with.

For context, I'm programming a simplistic Tumblr page (not my blog theme, just a page) in which the music, background, and gif will change depending on the time of day. After much frustration and trial and error, I've gotten most things to work—except one thing.

I want to have three times of day (day, sunset, night) however, I can only achieve day and night, for whenever I try to include "else if" it doesn't work. Here's my current code that does work, but only has two times of day out of three (night/sunset):

var currentTime = new Date().getHours();
if (19 <= currentTime && currentTime < 6) {
    if (document.body) {
        document.body.background = "(night bg)";
        var url = "(night gif)"; 
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
        var source = "(night music)";
        var audio = new Audio(); 
        audio.addEventListener("load", function() {
        audio.play();
        }, true);
        audio.src = source;
        audio.autoplay = true;
        audio.loop = true;
    }
}

else {
    if (document.body) {
        document.body.background = "(sunset bg)"; 
        var url = "(sunset gif)"; 
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
        var source = "(day music)";
        var audio = new Audio();
        audio.addEventListener("load", function() {
        audio.play();
        }, true);
        audio.src = source;
        audio.autoplay = true;
        audio.loop = true;


    }
}

I've attempted to change

else {
    if (document.body) {
        document.body.background = "(day bg)";

into saying "else if" instead of just "else" on the top, and also adding a time, like so:

 else if (16 <= currentTime && currentTime < 19) {
    if (document.body) {
        document.body.background = "(day bg)";

when that didn't work I've tried multiple things, like doing away with the "if" or making both the "if" and "else" into "else if" but I've gotten nothing to work. I've also tried to make a third block that was just "else" with the rest of the coding, but that didn't work either. Does anybody know a solution and/or what I'm doing wrong?

Answer 1

I think your solution can be improved. If you look at your code, you see that there are a lot of repetition for each event.

If you want to add another event, there is even more code to add.

I suggest that you make a schedule in an array instead. That makes it much more easy to add new events.

// Define the schedule. start= start hour, end = end hour.
// With start=6 and end=19, the schedule will be used between
// 06:00 - 18:59.
// The schedules will be searched in order, and the first matching
// schedule will be used. Therefore the default schedule (night) must
// be last in the list.
var schedule = [
  { start : 6, end:19, bbg:"(sunset bg)", img:"(sunset gif)", music:"(sunset music)" },

  // Default schedule, must be last in list.
  { start : 0, end:24, bbg:"(night bg)", img:"(night gif)", music:"(night music)" }
];

var currentHour = new Date().getHours();
var currentSchedue;

// Loop though schedules    
for (var idx=0; idx < schedule.length; idx+=1) {
  currentSchedule = schedule[idx];

  // Find first matching schedule
  if (currentSchedule.start <= currentHour && currentSchedule.end > currentHour) {
    document.body.background =  currentSchedule.bbg;

    var img = new Image();
    img.src = currentSchedule.img;
    document.body.appendChild(img);

    var audio = new Auido();
    audio.src = currentSchedule.music;
    audio.autoplay = true;
    audio.loop = true;

    break; // stop loop if matching schedule was found
  }
}

If you still want to use if-statements, here is a working example:

if ( 6 <= currentHour && currentHour < 16 ) {
  // Daytime, valid from 06:00 - 15:59
  console.log('Day', currentHour);
}
else if ( 16 <= currentHour && currentHour < 19 ) {
  // Evening  valid from 16:00 - 18:59
  console.log('Evening', currentHour);
}
else {
  // Night, valid 00:00 - 05:59 and 19:00 - 24:00
  console.log('Night', currentHour);
}

Logic error in your if-statement:

if (19 <= currentTime && currentTime < 6) {
}

• 19 <= currentTime is only true if currentTime is 19 or higher
• currentTime < 6 is only true if currentTime is less than 6.

They can't be true at the same time.

Answer 2

I think you have to change your code.

if (19 <= currentTime && currentTime < 6) is incorrect.

Because it means 19<= X < 6. It's impossible.

So you should change if (19 <= currentTime || currentTime < 6)

var currentTime = new Date().getHours();
if (19 <= currentTime || currentTime < 6) {
    if (document.body) {
        document.body.background = "(night bg)";
        var url = "(night gif)"; 
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
        var source = "(night music)";
        var audio = new Audio(); 
        audio.addEventListener("load", function() {
        audio.play();
        }, true);
        audio.src = source;
        audio.autoplay = true;
        audio.loop = true;
    }
}
else if(16 <= currentTime && currentTime < 19){
  /* programming Here */
}
else {
    if (document.body) {
        document.body.background = "(sunset bg)"; 
        var url = "(sunset gif)"; 
        var img = new Image();
        img.src = url;
        document.body.appendChild(img);
        var source = "(day music)";
        var audio = new Audio();
        audio.addEventListener("load", function() {
        audio.play();
        }, true);
        audio.src = source;
        audio.autoplay = true;
        audio.loop = true;


    }
}

Answer 3

var currentTime = new Date().getHours();
if (currentTime > 19 && currentTime < 6) {
  // Night
} else if (currentTime > 6 && currentTime < 17) {
  // Day
} else {
  // Sunset
}

For details see here