I have an if-else statement which serves up various image URLs depending on the time of day, with one image's URL per "else". I'm hoping I can have an img src where the source loads from that if-else statement, essentially loading a different picture for different times of day.
I have variables set for different times of day, then an if-else statement which selects from those. Below is a minimum reproducible sample:
<body onload="load()">
<p>Test:</p>
<img src="https://i.imgur.com/4LtRreH.png" id="image" name="image"/>
<script type="text/javascript">
const now = new Date();
const slot1 = now.getHours() === 14;
const slot2 = now.getHours() === 15;
const imageOne = "https://i.imgur.com/5IaY11U.png";
const imageTwo = "https://i.imgur.com/ANdRs50.png";
function load() {
document.getElementById('image').src= imgPick();
}
function imgPick() {
if (slot1) {
imageOne;
} else if (slot2) {
imageTwo;
}
};
</script>
</body>
For simplicity, I've just added slots from the time of posting.
My aim is to have my img src in the body be replaced by a URL from my if-else statement. So since I'm posting this at 2:32pm, it should be loading imageOne. Right now, it keeps defaulting to the link given in < body>.
If anyone could point me in the right direction, I'd really appreciate it.
Just return the value
function imgPick() {
if (slot1) {
return imageOne;
} else if (slot2) {
return imageTwo;
}
}