Using if/else statement with time to change an objects class
I want to be able to determine the class of an object depending on the time – I currently have two classes, recommendedspot and notrecommended. I have tried the code below however the image does not appear as I would like.
Below is my 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 anyone knows where I have gone wrong, please let me know as I can’t seem to figure it out! Thanks in advance.
The problem is, as others have emphasized, that the comparisons are not what you want. Also, half of the logic is missing: when you recommend something in one time slot, you’ll have to remove in another, if you don’t wish to show it.
This is a testable solution with, easier to understand, code.
You can test this by replacing the new Date.getHours() with actual numbers, to see how it changes.
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 part of the code depends on what would you like to happen outside the // known time slots (this one hides both elements, but any other combination // is possible) demote(southSpot); demote(northSpot); } } processElements(new Date().getHours()); // test with actual numbers: 1, 6, 8, 9, 12, 17, 19, 21 for example to see how it changes: // 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">
you are not handle the times properly do it something like below :-
`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 {}` handle the time i.e. equal to 6 ,17 , 9
Hope it will help.
You have not handled the equalities i.e when your time is 6/9/17/21.Handling the equalities resolve your problem.
Here is another solution using javascript case with only one html element. It simply provides the proper image at a given time. Also handles time frames outside the given logic (night time?)…
update added an alternate switch as some folks consider switch (true) bad behaviour. The alternate first determines the proper 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="">
