Search code examples
javascripthtmlsrc

How can I set an "img src=" to URL in JS variable?


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.


Solution

  • Just return the value

    function imgPick() {
      if (slot1) {
        return imageOne;
      } else if (slot2) {
        return imageTwo;
      }
    }