title: Displaying images with Javascript based on user input
body: <p>I have been trying to display image with the following code. The user input is intended to be compared to bring up the right picture. </p>
  
  <pre><code>$(document).ready(function(){ 
  var defaultimg = document.getElementById('image1');
  defaultimg.src = pictureImage;
  var pictureImage = "images/unknown.png";
  if({{messages.get.message}} == "Mewtwo"){   
  var imgobject = document.getElementById('image1');
  imgobject.src = pictureImage;
  pictureImage = "images/150.png";
  }
  if({{messages.get.message}} == "Charmeleon"){   
  var imgobject2 = document.getElementById('image1');
  imgobject2.src = pictureImage;
  pictureImage = "images/005.png";
  }
  
  if({{messages.get.message}} == "Warturtle"){    
  var imgobject3 = document.getElementById('image1');
  imgobject3.src = pictureImage;
  pictureImage = "images/008.png";
  }
  
  
  )}
  </code></pre>
  
  <p>to the following piece of html</p>
  
  <pre><code>&lt;img id="image1" alt="Pokemon" width="88" height="75"&gt;&amp;ensp;
  </code></pre>
  
  <p>At the moment it only displays an empty box.</p>
  
  <p>Can someone offer advice on whether this approach can be fixed to display the images? Thanks for the time and help.</p>