Change images on my webpage base on time and day

Does not work, Did you test it?

The code didn’t work because you have Hour instead hour.Check always your console for errors.It is a very useful tool to see what is going wrong.I tested the following code in liveweave and works

 var day = new Date();
 var today =parseInt(day.getDay());
 var hour = parseInt(day.getHours());
 var minutes = parseInt(day.getMinutes());
 var imgElem=document.getElementById('image_1');

(function(){
 		if(today>=2 && today<=6){
			if(hour>=10 && minutes<23){
				imgElem.src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Great_Red_Spot_From_Voyager_1.jpg/150px-Great_Red_Spot_From_Voyager_1.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='https://upload.wikimedia.org/wikipedia/en/thumb/9/97/Pluton_by_Henri_Chapu.png/220px-Pluton_by_Henri_Chapu.png';
			}else{
				imgElem.src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Jan_Brueghel_%28I%29_-_Orpheus_in_the_Underworld_-_WGA03564.jpg/300px-Jan_Brueghel_%28I%29_-_Orpheus_in_the_Underworld_-_WGA03564.jpg';
			}
		}
  
})();

Hey thank you so much it finally works. Just want to know if i want to add a next day into the code, is the code below right?

<!DOCTYPE html>
<html>
<head>
</head>

<<body>
	<img src="" alt="" id="image_1" />
</body>

	<script>
	var day = new Date();
 var today =parseInt(day.getDay());
 var hour = parseInt(day.getHours());
 var minutes = parseInt(day.getMinutes());
 var imgElem=document.getElementById('image_1');

(function(){
 		if(today>=2 && today<=6){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}

})();

(function(){
 		if(today>=3 && today<=6){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}

})();
</script>
</html>

It works nevermind. Thank you so so much for your time taken to help me.

You welcome.If you want to add next day work like the following:

function(){
 		if(today==0){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}

      if(today==1){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}
     if(today==2){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}

})();

Or you can work with the switch case statement like this:

(function(){
 		
 switch(today){
     
    case 0:
      if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
          break;
        case 1:
            if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
    break;
          

}

})();

Great thanks a lot. You are a genius. You mind be my friend please?

My pleasure.

I just have a last question sorry,

If i wanna add a next time, will this be right? OR what statement should i use? IF or ELSE IF?

if(today==0){
			if(hour>=14 && minutes<50){
				imgElem.src='image2.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image1.jpg';
			}else{
				imgElem.src='image3.jpg';
			}
		}

if(today==0){
if(hour>=14 && minutes<50){
imgElem.src=‘image2.jpg’;
}else if(minutes>=23 && minutes<45){
imgElem.src=‘image1.jpg’;
}else if(minutes>=23 && minutes<45){
imgElem.src=‘image1.jpg’;
}else{
imgElem.src=‘image3.jpg’;
}
}

else if statement for times before the final time set.

Sorry to bother you again, but i am trying at in between time, do know what will work? Becuase this is not working below

else if (hour > 12 && hour <= 3 && minutes < 10)
	return 'image1.jpg';

How would you demonstrate a time like this in the code:

for example lets say day = 1

i want to display an image from 7.10 am to 9am and then display a next one at 9 to 12pm and then a next one from 12.30 to 3pm.

That looks pretty easy. It should be something like this:

if (day === 1) {
    if (hour >= 7 && min >= 10 && hour < 9) {
        img = "..."; // for when between 7:10 and 9
    } else if (hour >= 9 && hour < 12) {
        img = "..."; // for between 9 and 12
    } else if (hour >= 12 && min >= 30 && hour < 15) {
        img = "..."; // for between 12:30 and 3
    } else {
        img = "..."; // some default image for day 1
    }
}

Notice that the period between 12 and 12:30 will also use the default day 1 image too.

this code is different. Please look above

I am giving examples that anybody can learn from. I consider that my job here is not to do the work for you.

2 Likes

I’m sorry. I actually meant I tried your concept but it does not work. I apoligize

(function(){
  		if(today === 2 && today<=6){
 			if(hour =21 && hour < 22){
 				imgElem.src='image1.jpg';
			}  if(hour=22 && hour <23){
				 imgElem.src='image2.jpg';
			 } if(hour=23 && minutes => 53 && hour < 24){
					 imgElem.src='image3.jpg';

 			}else{
 				imgElem.src='image2.jpg';
 			}
 		}

Even though i changed the time an check it, it is stuck on the same image

It looks like you are suffering from the same problem that you had before. A single equals sign is used to assign the value to its right to the what is on its left.

A double equals is to compare two values. A triple equals is better to use though for the double equals results in many side-effects that are best to be avoided.

You’re needing:

if (hour === 21 && ...) {

And so on for the other occasions that you are doing an equality comparison.

Wow Thank you soo much. It works perfectly now. Those triple equal sign were really important.Thanks for this learning experince and thanks for not giving up with this code. I really appreciate it

You can simplify these lines:

if(hour === 21 && hour < 22){
...
}  if(hour === 22 && hour <23){
...
} if(hour === 23 && minutes => 53 && hour < 24){

if you think about it. If the hour meets the first comparison, then by definition it will meet the second, since 21 is always less than 22, and 22 is always less than 23, and so on.