title: Javascript: Target image Id to display message
body: <p>I've attached an onclick event on two images. I would like to display a different message for each image. How do I create an if/else statement to display one message "You Liked this Cat!" if one image is clicked and the other "You Didn't Like this Cat!"</p>
  
  <pre><code>&lt;img src="black_cat.jpg" alt="Profile Pic" height="300" width="300" id="profile_pic"&gt;&lt;/img&gt;
      &lt;img src="white_cat.jpg" alt="Profile Pic" height="300" width="300" id="next_profile"&gt;&lt;/img&gt;
      &lt;img src="" alt="Swipe Left" height="150" width="150" id="swipe_left" onclick="hide_profile(); show_profile();"&gt;&lt;/img&gt;
      &lt;img src="" alt="Swipe Right" height="150" width="150" id="swipe_right" onclick="hide_profile(); show_profile();"&gt;&lt;/img&gt;
      &lt;p id="display_message"&gt;&lt;/p&gt;
  
  function hide_profile() {
      document.getElementById("profile_pic").style.visibility = "hidden";
  }
  
  function show_profile() {
      document.getElementById("next_profile").style.display = "block";
      document.getElementById("next_profile").style.visibility = "visible";
      document.getElementById("profile_pic").style.display = "none";
  
      document.getElementById("display_message").innerHTML = "You Liked this Cat!";
  }
  </code></pre>