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

Tips for creating a dashed border line that animates in a clockwise direction when hovering

Exploring the principles of object-oriented design within the context of Node

Enhancing React Performance: Storing Component Identity in Redux State

Message displayed within Ng-repeat loop

Struggling to align a div vertically using CSS is causing me some difficulties

Utilizing the Jquery hover feature to reveal or conceal an element

Unable to load the manually added module in the /node_modules/ folder

Tips on altering the quantity of columns in a ul list dynamically

Managing various encoding methods when retrieving the XML data feed

What is the process for integrating a custom script prior to building in a react application?

Ways to refresh UI in ReactJS without triggering a specific event

How do I remove the scroll bar from the datagrid using Material UI?

JavaScript is unable to post content or access elements

Issue with deploying NEXT.JS due to a failure in the build process caused by next lint

Arrange the array in chronological order based on the month and year

Is there a way to efficiently update specific child components when receiving data from websockets, without having to update each child individually?

Removing items from a todo list in JSX without relying on props or state

What is the process for setting default parameters using a recompose, lifecycle HOC?

Finding the correct column in a drop-down menu based on a table array using AngularJS

Can someone guide me on how to personalize a marker icon in Quasar while utilizing Vue2-Leaflet for mapping?