Change images on my webpage base on time and day

Can someone help me fix this code? I am trying to change images on my webpage base on time and day of the week. For example lets say today is monday i want an image to display from 9am to 12 pm and tuesday and so on. Please help

<html>
<body>
<script type="text/javascript">
	var day = new Date();
	var today = day.getDay();
	var hour = day.getHours();
	var minutes = day.getMinutes();

	if (today>0 && today<6)
		{if (hour = 8)
			{if (minutes > 23)
				{document.write("<img src="image2.jpg">")}
			else
				{document.write("<img src="image1.jpg">")}
			}
		else if (hour>8 && hour<14)
			{document.write("<img src="image2.jpg">")}
		else if (hour = 2)
			{if (minutes < 43)
				{document.write("<img src="image2.jpg">")}
			else
				{document.write("<img src="image1.jpg">")}
			}
		else
			{document.write("<img src="image1.jpg>")}
		</script>
</body>

When i run the code, no image is displaying.

var ...
var....
setInterval(function(){if (today>0 && today<6)
		{if (hour = 8)
			{if (minutes > 23)
				{document.write("<img src="image2.jpg">")}
			else
				{document.write("<img src="image1.jpg">")}
			}
		else if (hour>8 && hour<14)
			{document.write("<img src="image2.jpg">")}
		else if (hour = 2)
			{if (minutes < 43)
				{document.write("<img src="image2.jpg">")}
			else
				{document.write("<img src="image1.jpg">")}
			}
		else
			{document.write("<img src="image1.jpg>")}
},60000);

Hey thank you for taking the time to help me. I just try the code and nothing is displaying on the webpage. Please help me

First create img element with ID “image” inside of BODY and after BODY add this script (Not in HEAD)

<script>
    var date = new Date();[/details]
    var day = date.getDay();
    var hour = date.getHours();
    var minutes = date.getMinutes();
    var img;

    if (day > 0 && day < 6) {
        if (hour = 8) {
            if (minutes > 23) {
                img = "image1";
            } else {
                img = "image2";
            }
        } else if (hour > 8 && hour < 14) {
            img = "image1";
        } else if (hour = 2) {
            if (minutes < 43) {
                img = "image1";
            }
        } else {
            img = "image2";
        }
    } else {
        img = "image2";
    }
    
    (function() {
        document.getElementById("image").src = img + ".jpg";
    })()
</script>

In this case you don’t have to update DOM tree, just modify src of element.

You can also try this approach:

inside of BODY element create DIV with id container and then append IMG element to it with script.

(function() {
var img_elem = document.createElement(“img”);
img_elem.src = src + ".jpg;

var container = document.getElementById(“container”);
container.appendChild(img_elem);
})()


Hope this helps.

I checked it but it does not work. Please help

Please paste here your whole code. This should work beacuse I have tested it.

<!DOCTYPE html>
<html>
<body>
	<script>
	    var date = new Date();
	    var day = date.getDay();
	    var hour = date.getHours();
	    var minutes = date.getMinutes();
	    var img;

	    if (day > 0 && day < 6) {
	        if (hour = 19) {
	            if (minutes > 1) {
	                img = "image1";
	            } else {
	                img = "image2";
	            }
	        } else if (hour > 8 && hour < 14) {
	            img = "image1";
	        } else if (hour = 2) {
	            if (minutes < 43) {
	                img = "image1";
	            }
	        } else {
	            img = "image2";
	        }
	    } else {
	        img = "image2";
	    }

	    (function() {
	        document.getElementById("image").src = img + ".jpg";
	    })()
	</script>
</body>
</html>

Did you create IMG element with id “image” inside of body tag and did you place this script at the bottom?
Are you images placed in the same directory as the index.html file?

Try with some images from the web instead of you image1 and image2.

for example:
image1:


image2

and modify this line:
document.getElementById(“image”).src = img;

And don’t expose your email address to public :wink:

Damn your’re a genius. I just wanna say thank you so much. I wish I have friends like you. Please be my friend lol

IF i wanna make a display for monday how will i do that? any idea?

Sorry for diverting the thread, but I saw this and a few other similar lines of code above:

if (hour = 8) {

I originally commented in the OPs original code in the PHP board (but then deleted it) that the line won’t work correctly because it should have a double-equal sign. I’m learning JS and thought I was correct, but as the code above apparently works correctly, am I wrong about the = / == difference in JS?

1 Like

Yes you are correct the single ‘=’ is an assignment operator and assigns the value on the right to the variable on the left.

Therefore this code:

if (hour = 19) {
	alert(hour);
	} else {
	//this will never be executed
      alert('help');

}

The above will always result in the hour being 19 because that’s what you suddenly assign to it and so it always will be true.

On the other hand the double == is a comparison operator and will compare the value on the right to the variable on the left…


var date = new Date();
	    var day = date.getDay();
	    var hour = date.getHours();
	    var minutes = date.getMinutes();
	    var img;

if (hour == 19) {
	do something 
	} else {
	do something else
}

The following code will only parse the first section (do something) when the actual hour is 19.

2 Likes

You’re absolutely right. That part of code propagated from the first post :slight_smile:
I didn’t see it because I assumed that conditions are ok and that part of code with inserting image to DOM is critical.

That’s why copy/paste is bad in programming :slight_smile:

Can you please help me fix my code jasmin? I am trying to display an image at day of the week and time. For example today is monday a image will show from 7am to 10am and tuesday…etc please help me

can you expand on this

So… the main problem here is how and when the function that changing images is going to triggered.You have two choices
One: when the page loading then it triggers the function and then the function set the image src
Two:Dynamically to add a function like setInterval() that executing (in my case every 60000 ms=60sec=1min).In this case the function that contained inside the setInterval() function wrapper will check the time and correspondingly change the img src attr.

So my suggestion is the following:
For the first choise:
HTML code

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

Javascript code:

 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>=0 && today<=6){
       if(minutes>=0 && minutes<23){
         imgElem.src='url_1.jpg';
       }else if(minutes>=23 && minutes<45){
          imgElem.src='url_2.jpg';
       }else{
         imgElem.src='url_3.jpg';
       }
     }   
 })();
  

For the second choise:
The same as above HTML code
Javascript:

setInterval(function(){
     if(today>=0 && today<=6){
       if(minutes>=0 && minutes<23){
         imgElem.src='url_1.jpg';
       }else if(minutes>=23 && minutes<45){
          imgElem.src='url_2.jpg';
       }else{
         imgElem.src='url_3.jpg';
       }
     }
}, 60000);

IS this 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>=10 && minutes<23){
				imgElem.src='iamge1.jpg';
			}else if(minutes>=23 && minutes<45){
				 imgElem.src='image2.jpg';
			}else{
				imgElem.src='image2.jpg';
			}
		}
})();
	</script>

</html>

Yes.Make a test in your page changing the date and hour minutes values to see if its working.Eg if you have now 20:45 set date 2 hour 20 minute 47 and check how ots working