title: HTML How to change image onClick
body: <p>I'm trying to have an image that changes when clicked: when image 1 is clicked, change to image 2, when image 2 is clicked change to image 3 and when image 3 is clicked it changes to image 1.    </p>
  
  <pre><code>&lt;p&gt;
      &lt;img alt="" src="assets/img1.png" 
          style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"   /&gt;
  </code></pre>
  
  <p></p></p>
  
  <pre><code>&lt;script language="javascript"&gt;
  function changeImage() {
  
      if (document.getElementById("imgClickAndChange").src == "assets/img1.png") 
      {
          document.getElementById("imgClickAndChange").src = "assets/img2.png";
  
      }
      else if (document.getElementById("imgClickAndChange").src == "assets/img2.png")
      {
          document.getElementById("imgClickAndChange").src = "assets/img3.png";
  
      }
      else if(document.getElementById("imgClickAndChange").src == "assets/img3.png"){
      document.getElementById("imgClickAndChange").src = "assets/img1.png"
  
      }
  </code></pre>