Utilizing conditional statements and time to dynamically alter the class of an object

Question

Utilizing conditional statements and time to dynamically alter the class of an object

I need to change the class of an object based on the time, with two classes available: recommendedspot and notrecommended. The code I've written so far is not displaying the image correctly. Can someone help me troubleshoot this issue?

Here is my current code:

var time = new Date().getHours();
if (time > 9 && time < 17) {
  document.getElementById("spotsouth").classList.remove('notrecommended');
  document.getElementById("spotsouth").classList.add('recommendedspot');
} else if (time > 6 && time < 9) {
  document.getElementById("spotnorth").classList.remove('notrecommended');
  document.getElementById("spotnorth").classList.add('recommendedspot');
} else if (time > 17 && time < 21) {
  document.getElementById("spotnorth").classList.remove('notrecommended');
  document.getElementById("spotnorth").classList.add('recommendedspot');
} else {}

.notrecommended {
  display: none;
}

.recommendedspot {
  display: inline;
  margin-left: 15px;
  max-width: 50px;
}

<img id="spotsouth" src="site-logo.png" alt="spot south" class="notrecommended">
<img id="spotnorth" src="site-logo.png" alt="spot north" class="notrecommended">

If you spot where I went wrong, please share your insights as I am struggling to resolve this issue. Thank you in advance.

javascript html css datetime if-statement

Answer 1

Answer №1

It's clear that the issue lies in the comparisons not aligning with your desired outcome, as others have pointed out. Additionally, there seems to be a missing piece of logic: recommending something in one time slot requires removing it from another if you don't want both to show simultaneously.

This solution provides testable code that is easier to comprehend.

To test this solution, simply replace new Date.getHours() with actual numbers to observe its effects on the outcome.

function promote(element) {
  element.classList.remove('notrecommend');
  element.classList.add('recommendedspot');
}

function demote(element) {
  element.classList.remove('recommendedspot');
  element.classList.add('notrecommend');
}

function processElements(time) {
  var southSpot = document.getElementById("spotsouth")
  var northSpot = document.getElementById("spotnorth");

  var inMorning = time >= 6 && time < 9;
  var inWorkTime = time >= 9 && time < 17;
  var inEvening = time >= 17 && time <= 21

  if (inWorkTime) {
    promote(southSpot);
    demote(northSpot);
  } else if (inMorning || inEvening) {
    promote(northSpot);
    demote(southSpot);
  } else {
    // This section of the code handles scenarios outside of the known time slots. In this instance, it hides both elements, but other combinations are possible.
    demote(southSpot);
    demote(northSpot);
  }
}

processElements(new Date().getHours());

// Test with specific numbers to observe changes, such as 1, 6, 8, 9, 12, 17, 19, 21:
// processElements(1);

.notrecommended {
  display: none;
}

.recommendedspot {
  display: inline;
  margin-left: 15px;
  max-width: 50px;
}

<img id="spotsouth" src="site-logo.png" alt="spot south" class="notrecommended">
<img id="spotnorth" src="site-logo.png" alt="spot north" class="notrecommended">

Answer 2

It's clear that the issue lies in the comparisons not aligning with your desired outcome, as others have pointed out. Additionally, there seems to be a missing piece of logic: recommending something in one time slot requires removing it from another if you don't want both to show simultaneously.

This solution provides testable code that is easier to comprehend.

To test this solution, simply replace new Date.getHours() with actual numbers to observe its effects on the outcome.

function promote(element) {
  element.classList.remove('notrecommend');
  element.classList.add('recommendedspot');
}

function demote(element) {
  element.classList.remove('recommendedspot');
  element.classList.add('notrecommend');
}

function processElements(time) {
  var southSpot = document.getElementById("spotsouth")
  var northSpot = document.getElementById("spotnorth");

  var inMorning = time >= 6 && time < 9;
  var inWorkTime = time >= 9 && time < 17;
  var inEvening = time >= 17 && time <= 21

  if (inWorkTime) {
    promote(southSpot);
    demote(northSpot);
  } else if (inMorning || inEvening) {
    promote(northSpot);
    demote(southSpot);
  } else {
    // This section of the code handles scenarios outside of the known time slots. In this instance, it hides both elements, but other combinations are possible.
    demote(southSpot);
    demote(northSpot);
  }
}

processElements(new Date().getHours());

// Test with specific numbers to observe changes, such as 1, 6, 8, 9, 12, 17, 19, 21:
// processElements(1);

.notrecommended {
  display: none;
}

.recommendedspot {
  display: inline;
  margin-left: 15px;
  max-width: 50px;
}

<img id="spotsouth" src="site-logo.png" alt="spot south" class="notrecommended">
<img id="spotnorth" src="site-logo.png" alt="spot north" class="notrecommended">

Answer 3

Answer №2

Make sure to manage the time intervals properly using the code snippet below:

`var currentTime = new Date().getHours();
 if (currentTime >= 9 && currentTime < 17) {
   document.getElementById("spotsouth").classList.remove('notrecommended');
   document.getElementById("spotsouth").classList.add('recommendedspot'); 
 } else if (currentTime > 6 && currentTime < 9) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
 } else if (currentTime >= 17 && currentTime < 21) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
} else {}`

Ensure that the time is handled correctly for values equal to 6, 17, and 9.

Hopefully, this solution will be beneficial.

Answer 4

Make sure to manage the time intervals properly using the code snippet below:

`var currentTime = new Date().getHours();
 if (currentTime >= 9 && currentTime < 17) {
   document.getElementById("spotsouth").classList.remove('notrecommended');
   document.getElementById("spotsouth").classList.add('recommendedspot'); 
 } else if (currentTime > 6 && currentTime < 9) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
 } else if (currentTime >= 17 && currentTime < 21) {
   document.getElementById("spotnorth").classList.remove('notrecommended');
   document.getElementById("spotnorth").classList.add('recommendedspot');
} else {}`

Ensure that the time is handled correctly for values equal to 6, 17, and 9.

Hopefully, this solution will be beneficial.

Answer 5

Answer №3

It's important to address the equalities, such as when your time is at 6/9/17/21. Handling these equalities will help solve any issues that may arise.

Answer 6

It's important to address the equalities, such as when your time is at 6/9/17/21. Handling these equalities will help solve any issues that may arise.

Answer 7

Answer №4

Here is a different approach utilizing javascript case with just one html element. It effectively displays the correct image based on the current time and also accounts for time frames outside the specified parameters (such as night time).

update included an alternative switch since some individuals view switch (true) as unfavorable behavior. This alternative first identifies the appropriate timeframe.

var imgNorth = 'url/to/north.png';
var imgSouth = 'url/to/south.png';
var imgClose = 'url/to/close.png';

var image  = document.getElementById("image");
var image2 = document.getElementById("image2");

var time = new Date().getHours();

/* Solution */

switch (true) { // conditional switch, some folks don't like this
   case (time >=  6 && time <   9): // Between 6 and 9
   case (time >= 17 && time <= 21): // Between 17 and 21
       image.src = imgNorth;
       image.alt = 'spot north';
       break;

   case (time >= 9 && time < 17): // Between 9 and 17
       image.src = imgSouth;
       image.alt = 'spot south';
       break;

   case (time < 6 || time > 21): // ??
       image.src = imgClose; // No seats? closed? stand only??
       image.alt = 'closed';
       break;
};


/* Alternate */

// Get timeframe
var timeFrame =  (time >=  6 && time <   9) ? 1 :
                ((time >= 17 && time <= 21) ? 2 :
                ((time >=  9 && time <  17) ? 3 : 4 ));                 

switch (timeFrame) { // fall-through switch check, preferred
    case 1:
    case 2: // Between 6 and 9 or between 17 and 21
        image2.src = imgNorth;
        image2.alt = 'spot north';
        break;

    case 3: // Between 9 and 17
        image2.src = imgSouth;
        image2.alt = 'spot south';
        break;

    case 4: // ??
        image2.src = imgClose; // No seats? closed? stand only??
        image2.alt = 'closed';
        break;
};

<img id="image" src="site-logo.png" alt=""><br>
<img id="image2" src="site-logo.png" alt="">

Answer 8

Here is a different approach utilizing javascript case with just one html element. It effectively displays the correct image based on the current time and also accounts for time frames outside the specified parameters (such as night time).

update included an alternative switch since some individuals view switch (true) as unfavorable behavior. This alternative first identifies the appropriate timeframe.

var imgNorth = 'url/to/north.png';
var imgSouth = 'url/to/south.png';
var imgClose = 'url/to/close.png';

var image  = document.getElementById("image");
var image2 = document.getElementById("image2");

var time = new Date().getHours();

/* Solution */

switch (true) { // conditional switch, some folks don't like this
   case (time >=  6 && time <   9): // Between 6 and 9
   case (time >= 17 && time <= 21): // Between 17 and 21
       image.src = imgNorth;
       image.alt = 'spot north';
       break;

   case (time >= 9 && time < 17): // Between 9 and 17
       image.src = imgSouth;
       image.alt = 'spot south';
       break;

   case (time < 6 || time > 21): // ??
       image.src = imgClose; // No seats? closed? stand only??
       image.alt = 'closed';
       break;
};


/* Alternate */

// Get timeframe
var timeFrame =  (time >=  6 && time <   9) ? 1 :
                ((time >= 17 && time <= 21) ? 2 :
                ((time >=  9 && time <  17) ? 3 : 4 ));                 

switch (timeFrame) { // fall-through switch check, preferred
    case 1:
    case 2: // Between 6 and 9 or between 17 and 21
        image2.src = imgNorth;
        image2.alt = 'spot north';
        break;

    case 3: // Between 9 and 17
        image2.src = imgSouth;
        image2.alt = 'spot south';
        break;

    case 4: // ??
        image2.src = imgClose; // No seats? closed? stand only??
        image2.alt = 'closed';
        break;
};

<img id="image" src="site-logo.png" alt=""><br>
<img id="image2" src="site-logo.png" alt="">

Utilizing conditional statements and time to dynamically alter the class of an object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to integrate PHP MySQL with NodeJS and SocketIO

Retrieve the ID of the image element using Jquery from a collection of images within a div container

How to Display HTML Content from a WYSIWYG Editor in ASP.NET Webforms without Master Page Bootstrap Styles Interfering

Some browsers are failing to display the navigation bar on my website

'jQuery' is not recognized as defined, error no-undef

Nunjucks not loading the script when moving from one page to another

Having trouble getting my angular form validation to function properly

Encountering a problem with the JavaScript promise syntax

Pandas will provide the following Sunday date for each row

Sorting nested table rows in vueJS is an essential feature to enhance

Integrating objects into the <select> element through the combination of C#, JavaScript, and HTML connected to a SQL

Is there a way to handle specific email format designs with PHP?

Tips for implementing React Browser Router within Material UI Drawer

What technique is used in this CSS code to give each line of text a unique horizontal color gradient?

"React-router is successfully updating the URL, however, the component remains un

What is the process of replacing fetch with JavaScript?

Switching from HTML to PHP programming

Is QA supported by LG WebOS 3.5 through webdriver?

Steps for inputting time as 00:00:00 in MUI's X DateTimePicker

Website Translator