Any idea whats wrong with this code?

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>


</body>
<script>

var date = new Date();
var hour = date.getHours();
var day = date.getDays();

if (hour > 9 && hour <= 12 && day === 1)
	return 'image2.jpg';
else if (hour > 12 && hour <= 3 && day === 1)
	return 'image1.jpg';
else
	return 'image2.jpg';
}

var image = document.getElementById('your-image');
image.src = getImageSourceByDate();
		</script>
</html>

I just replied in your other cross post

Nothing personal, but I for one have a difficult time keeping up with cross posts. Please stop doing it.

This is a different code and i reallly need help with getting this to work. I am so confused

You were close, but you have a few issues

  1. you missed your function definition function getImageSourceByDate() { at the top of your script
  2. you meant to use getDay instead of getDays
  3. you forgot to have your <img id="your-image" /> here tag above your script and in the body element.
  4. you needed to have your script inside the <body></body> tags
<html>
<body>
<img id="your-image" />

<script type="text/javascript">
function getImageSourceByDate() {
var date = new Date();
var hour = date.getHours();
var day = date.getDay();

if (hour > 9 && hour <= 12 && day === 1)
	return 'https://media.giphy.com/media/26gsk7BaYn2smKnde/source.gif';
else if (hour > 12 && hour <= 3 && day === 1)
	return 'https://media.giphy.com/media/3o7TKDArbPGRbwH0XK/source.gif';
else
	return 'https://media.giphy.com/media/3o7TKr2XFDCA7ZoLkY/source.gif';
}

var image = document.getElementById('your-image');
image.src = getImageSourceByDate();
</script>
</body>
</html>

As a codepen:

This works thank you. Any idea how can i add minutes inside of it?
Thank you so much.

I am not surprised. You have three topics going at the same time and are getting different approaches to the problem from various members.

https://www.sitepoint.com/community/t/please-help-me-with-the-code-below/256658

There is good reason cross posting is discouraged.

3 Likes

They are different codes that will do the same thing but it does not work. You have a problem? You don’t have to point it out

Maybe find one set of code that does it right?

Why not have a go at this yourself, then let us know if you get stuck. Simply asking for the solution without demonstrating that you’ve at least attempted to arrive at it yourself is generally considered pretty bad form.

2 Likes

I’m tempted to rework the above code in to a separate function, to make it easier to understand the main code, and allow us to simplify what happens within the function too.

function getImage(day, hour) {
    if (day === 1) {
        if (hour > 9 && hour <= 12) {
            return 'https://media.giphy.com/media/26gsk7BaYn2smKnde/source.gif';
        } else if (hour > 12 && hour <= 3) {
            return 'https://media.giphy.com/media/3o7TKDArbPGRbwH0XK/source.gif';
        }
    } else {
        return 'https://media.giphy.com/media/3o7TKr2XFDCA7ZoLkY/source.gif';
    }
}
...
return getImage(day, hour);

With the if statements int he function organised by the day, it’s easier to understand how you might organise things by the minute too.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.