title: Basic Javascript - mouse click to change picture and caption
body: <h1>Objective</h1>
  
  <p>Two categories (i.e. dog and cat) of images, image and image caption. I want to click on that image and have it change to a picture of the second category, if you click again it changes to the other category. So somehow i need to define the images within one of two categories then alternate them on click.</p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;img src="img/dogImg.jpg" alt="" id="imgClickAndChange"&gt;
  &lt;h1 id="title"&gt;Dog Title&lt;/h1&gt;
  &lt;p id="caption"&gt;caption for dog.&lt;/p&gt;
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>function changeImage() {
  
      if (document.getElementById("imgClickAndChange").src = "img/dogImg.jpg") 
      {
          document.getElementById("imgClickAndChange").src = "img/catImg.jpg";
          document.getElementById("title").innerHTML = "Cat Title";
          document.getElementById("caption").innerHTML = "caption for cat.";
  
      }
      else
      {
          document.getElementById("imgClickAndChange").src = "img/dogImg.jpg";
          document.getElementById("title").innerHTML = "Dog Title";
          document.getElementById("caption").innerHTML = "caption for dog.";
      }
  }
  
  var el = document.getElementById("imgClickAndChange");
  el.addEventListener("click", changeImage, false);
  </code></pre>
  
  <p>Right now it seems to be changing to the cat info okay, but I can't figure out how to make it go back to dog. Having the caption for the dog in both the HTML and Javascript seem redundant. Is there a simpler way to do this whole thing? Thanks! </p>