title: How to switch between two images using one button (html/js)
body: <p>I'm aware there is an error (I've tried to preview my code on a browser and the button fails to work) but I'm unable to spot it and would like to make my code more efficient if possible. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Mood Changer&lt;/h1&gt;
  
  &lt;button onclick="ChangeImage()"&gt;Change Mood&lt;/button&gt;
  
  &lt;img id="myImage" src="Images/sad.png" style="width:100px"&gt;
  
  &lt;script&gt;
      var index = 0;
      var ImageList = newArray(1);
      ImageList[0] = "Images/sad.png";
      ImageList[1] = "Images/smiley.png";
      
      function ChangeImage()
      {
       index = index + 1;
        If (index ==ImageList.length)
        {
         index = 0;
        }
        var image1 = document.getElementById("myImage");
        image1.src = ImageList[index];
      }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>