title: display and change image using timer JavaScript
body: <p>I have 4 images in an array</p>
  
  <pre><code>images = ["image1.png","image2.png","image3.png","image4.png"]
  </code></pre>
  
  <p>I want a JavaScript script that displays image1 when the page loads, but also so that for every 3 seconds the next image in the array is displayed, hence replacing the previous image. However when it reached the image4, the reverts back to image1. </p>
  
  <p>EDIT: As someone asked, here is my code so far:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;body onload = "myFunction()"&gt;
  &lt;img src ="image1.png" id = "target" &gt;
  &lt;script&gt;
      var counter = 0;
      var images = ["image1.png","image2.png","image3.png",image4.png"];
      function myFunction() {
         counter += 1
         if (counter &gt; 4) {
             counter = 0
         }
         target = document.getElementById ("target").src = images[counter]
      }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If any errors are found please notify me. I have tried setInterval before however it just gave me image1 when the page loads. 
  Thanks in advance.</p>