Both the if and else statement are executing together

Question

I've modified this code for the example so the date and time isn't currently updating on it's own. The basic explanation is: There is a counter keeping track of the current time and refreshing every second, pushing it to a element in the DOM . However I want to execute code for when the time is between two certain times of the day. These times were defined in the setDrwBrks function like this:

  mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 );

  dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 );

  eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 );

  nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 );

This is my problem code in the fndNxtDrwBrk( date ) function:

  for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
      dspl.textContent += '... First statement executed';
    }
    else {   
      document.querySelector( 'footer' ).textContent = 'why is this also executed?';
    }
  }

The goal here is to execute the if statement when the date time is between the strtDrwBrks[ j ] and endDrwBrks[ j ] times. In my snippet this executes because I've manually set the time to be 9:51AM here in my pushDates() function:

  ////Control current time 
  today.setDate( 8 );
  today.setHours( 9 );
  today.setMinutes( 51 );

So between 9:50am and 10:03am this code should be executed, which it does. However my else statement also executes. This is the problem. Any ideas why this happens and how to fix it? I've been working at this for hours to no avail.

 'use strict'; // ///////////////////////////// INITIAL /////////////////////////////////// // function leading_0( num ) { if( num < 10 ) { num = '0' + num; } return num; } // ////////////////////////////// DATES //////////////////////////////////// // function getCurrentTime( date ) { // TIME / / / / / / / / / / / / / / / / / // var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds(), suffix = hours >= 12 ? 'PM' : 'AM', fullTime; hours = hours % 12; if( hours === 0 ){ hours = 12; } minutes = leading_0( minutes ); seconds = leading_0( seconds ); fullTime = hours + ':' + minutes + ':' + seconds + ' ' + suffix; return fullTime; } // \\\\/ / / / / / / / / / / / / / / TIME / / / / / / / / / / / / / / / / / // function getYear( date ) { /// / / / YEAR / / / / / / / / / / / / / / / / / // var year = date.getFullYear(); return year; } // \\\\/ / / / / / / / / / / / / / / YEAR / / / / / / / / / / / / / / / / / // function getMonthDay( date ) { /// MONTH DAY / / / / / / / / / / / / / / / /// var day = date.getDate(); return day; } // \\\\/ / / / / / / / / / / / / / MONTH DAY / / / / / / / / / / / / / / / /// function getMonth( date ) { // / / / MONTH / / / / / / / / / / / / / / / / /// var months = [ 'January', 'Feburary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], month = months[ date.getMonth() ]; return month; } // \\\\/ / / / / / / / / / / / / / / MONTH / / / / / / / / / / / / / / / / /// function getWkDay( date ) { /// / / WEEK DAY / / / / / / / / / / / / / / / /// var weekdays = [ 'Sunday', 'Monday', 'Tueday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ], wkDay = weekdays[ date.getDay() ]; return wkDay; } // \\\\ / / / / / / / / / / / / / / WEEK DAY / / / / / / / / / / / / / / / /// function callBySec( func ) { setInterval( func, 1000 ); } function pushDate() { // / / / / / PUSH DATES / / / / / / / / / / / / / / / // var today = new Date(), wkDay, month, day, year, time, d = document; ////Control current time today.setDate( 8 ); today.setHours( 9 ); today.setMinutes( 51 ); wkDay = getWkDay( today ); month = getMonth( today ); day = getMonthDay( today ); year = getYear( today ); time = getCurrentTime( today ); d.getElementById( 'wkDay' ).textContent = wkDay; d.getElementById( 'month' ).textContent = month; d.getElementById( 'day' ).textContent = day; d.getElementById( 'year' ).textContent = year; d.getElementById( 'time' ).textContent = time; return today; } // \\\\/ / / / / / / / / / / / / / PUSH DATES / / / / / / / / / / / / / / / // function nextDate( startDate, dates ) { // NEXT DATE / / / / / / / / / / / / / var startTime = + startDate, nearestDate, nearestDiff = Infinity, i, n, diff; for( i = 0, n = dates.length; i < n; ++i ) { diff = + dates[ i ] - startTime; if( diff > 0 && diff < nearestDiff ) { nearestDiff = diff; nearestDate = dates[ i ]; } } return nearestDate; } // \\\\ / / / / / / / / / / / / / / / / / NEXT DATE / / / / / / / / / / / / // function setDrwBrks() { // / / / SET DRAW BREAKS / / / / / / / / / / / / / / / var today = pushDate(), mBrkStrt = pushDate(), mBrkEnd = pushDate(), dBrkStrt = pushDate(), dBrkEnd = pushDate(), eBrkStrt = pushDate(), eBrkEnd = pushDate(), nBrkStrt = pushDate(), nBrkEnd = pushDate(), strtDrwBrks = [], endDrwBrks = [], drwBrksColl = []; mBrkStrt.setHours( 9, 50, 0 ); mBrkEnd.setHours( 10, 3, 0 ); dBrkStrt.setHours( 12, 17, 0 ); dBrkEnd.setHours( 12, 30, 0 ); eBrkStrt.setHours( 17, 50, 0 ); eBrkEnd.setHours( 18, 3, 0 ); nBrkStrt.setHours( 22, 2, 0 ); nBrkEnd.setHours( 22, 15, 0 ); strtDrwBrks.push( mBrkStrt ); endDrwBrks.push( mBrkEnd ); strtDrwBrks.push( dBrkStrt ); endDrwBrks.push( dBrkEnd ); strtDrwBrks.push( eBrkStrt ); endDrwBrks.push( eBrkEnd ); strtDrwBrks.push( nBrkStrt ); endDrwBrks.push( nBrkEnd ); drwBrksColl.push( strtDrwBrks ); drwBrksColl.push( endDrwBrks ); return drwBrksColl; } // \\\\/ / / / / / / / / / / / / SET DRAW BREAKS / / / / / / / / / / / / / /// function fndNxtDrwBrk( date ) { // FIND NEXT DRAW BREAK / / / / / / / / / / /// date = pushDate(); var drwBrks = setDrwBrks(), nxtDrwBrk = nextDate( date, drwBrks[ 0 ] ), strtDrwBrks = drwBrks[ 0 ], endDrwBrks = drwBrks[ 1 ], i, j, day, dspl = document.getElementById( 'dspl' ), dspl2 = document.getElementById( 'dspl-2' ); if( nxtDrwBrk === undefined ) { for( i = 0; i < 4; i++ ){ drwBrks[ 0 ][ i ].setDate( date.getDate() + 1 ); } nxtDrwBrk = nextDate( date, drwBrks[ 0 ] ); } day = nxtDrwBrk.getDay(); if( day === 0 ) { nxtDrwBrk.setDate( nxtDrwBrk.getDate() + 1 ); nxtDrwBrk.setHours( 9, 50, 0 ); } for( j = 0; j < 4; j++ ) { if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) { dspl.textContent += '... First statement executed'; } else { document.querySelector( 'footer' ).textContent = 'why is this also executed?'; } } return nxtDrwBrk; } // \\\\ / / / / / / / / / / / / FIND NEXT DRAW BREAK / / / / / / / / / / / /// // ////////////////////////////// START //////////////////////////////////// // function start() { var today = pushDate(); pushDate(); callBySec( pushDate ); fndNxtDrwBrk( today ); } start(); 

 .remove { display: none; } 

 <p id="dspl"> <span id="wkDay"></span>, <span id="month"></span> <span id="day"></span>, <span id="year"></span> <b>|</b> <span id="time"></span> </p> <p id="dspl-2" class="remove"> Secondary Text </p> <footer></footer> 

PS. The error in the console is because I manually changed the time to a range between the test times with the code under the ////Control current time comment. Remove this and the console will be quiet. No idea how to set the time like that for this snippet without running into that error, tried fixing, but that is a separate problem that doesn't really need to be fixed as the code setting it off is just for this demo.

Answer 1

You are iterating between your four differents interval of time. The time cannot be between your first interval and the second interval and the third and the fourth at the same time.

For example: 12.30 is between 10.10 and 13.20, but not between 15.20 and 16.40 So when it comes to test if it's between the second time interval, it goes to the else statement. As you are testing 4 intervals (looping 4 times), it will goes to the else 3 times as only one interval contains the actual hour.

So, let's say your want to know if it's between one of the four interval you have.

Created a boolean isBetweenOneInterval that is set to false by defaut. Then iterate between your interals.

If time is between interval

Set isBetweenOneInterval to true

After the end of your loop, check if isBetweenOneInterval is true .

If isBetweenInterval is true do what you want to do when it's between an interval. If not, do what you want to do when it's not between an interval, for example, hide the div containing the countdown.

Put into code it means :

var isBetweenOneInterval = false;

 for( j = 0; j < 4; j++ ) {
    if( date > strtDrwBrks[ j ] && date < endDrwBrks[ j ] ) {
     isBetweenOneInterval = true;
    }
  }

if (isBetweenOneInterval == true)
{
 //// DO WHAT YOU WANT IF THE CURRENT TIME IS BETWEEN AN INTERVAL
}
else
{
 ///// DO WHAT YOU WANT IF THE CURRENT TIME ISN'T BETWEEN ANY INTERVAL
}