title: How do I cycle through images with a single button?
body: <p>I have just started coding javascript in notepad++ at a GCSE level.
  One of my tasks in my Assessment is to make traffic lights change colour, one image for each button click. 
  I have got as far as Making the Red light change to a Red-Yellow light. However, I am unable to go further with this.
  My code so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript"&gt;
  function lewis() {
      document.getElementById("pic").src="Red-Yellow.png"
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button type="button" onclick="lewis()"&gt;
  Change Lights&lt;/button&gt;
  &lt;img src="Red.png" alt="Red" id="pic" style="width:250px;height:600px;"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the height of my ability as I have just started.
  <em>Any</em> help would be appreciated, many thanks,
  Lewis</p>
  
  <p>(I will continue to do research alongside this question)</p>