Changing image source using JS not working

Question

I am trying to change src of an image based on day. But the src is not updating. What is the problem?

    <head>
<script type="text/javascript">
image = new Array(7);
image[0] = 'img/about-img1.jpg';
image[1] = 'img/about-img2.jpg';
image[2] = 'img/about-img3.jpg';
image[3] = 'img/about-img4.jpg';
image[4] = 'img/about-img1.jpg';
image[5] = 'img/about-img4.jpg';
image[6] = 'img/about-img5.jpg';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.getElementById("special").src=image[imagenumber];
</script>
</head>
<body>
<img  id="special" src="">
</body>

Are you using MasterPages to build the page? If so, the name of the element may have "MainContent_" attached to the front of the ID preventing you from finding it with getelementbyID... — Rick Runowski, Jun 16 '16 at 14:04

score 3 · Accepted Answer · edited Jun 16 '16 at 14:43

You're trying to access the DOM before it is even loaded. Put the script tag below the <img> at the end of the <body> tag.

<body>
<img  id="special" src="">

<script type="text/javascript">
image = new ImageArray(7);
image[0] = 'img/about-img1.jpg';
image[1] = 'img/about-img2.jpg';
image[2] = 'img/about-img3.jpg';
image[3] = 'img/about-img4.jpg';
image[4] = 'img/about-img1.jpg';
image[5] = 'img/about-img4.jpg';
image[6] = 'img/about-img5.jpg';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.getElementById("special").src=image[imagenumber];
</script>
</body>

Alternatively, look into using a window.onload event to ensure your script is executed after the DOM is loaded (similar to jQuery's $(function() { }); but using plain JavaScript).
See here

Yeah .. That was the problem .Thanks +1 – jophab Jun 16 '16 at 14:08 — jophab, Jun 16 '16 at 14:08

score 0 · Answer 2 · answered Jun 16 '16 at 14:02

The solution is to place the javaScript code in the body after the <img> tag. Using it in the head executes it, before the image DOM element exists and so getElementById() doesn't find anything.

<head>
</head>
<body>
  <img  id="special" src="">
  <script type="text/javascript">
    var image = [1, 2, 3, 4, 1, 4, 5],
        currentdate = new Date();
    document.getElementById("special").src = 'img/about-img' + image[currentdate.getDay()] + '.jpg';
  </script>
</body>

Yeah .. That was the problem .Thanks +1 – jophab Jun 16 '16 at 14:08 — jophab, Jun 16 '16 at 14:08

Changing image source using JS not working

2 Answers2