title: Javascript: Load an Image from url and display
body: <p>I want to preface this with the fact that I am very very new to JavaScript. I appreciate your patience with me.</p>
  
  <p>I'm trying to create a script that allows a user to input a name into a text-area, press submit and an image is displayed based on that name. </p>
  
  <p>I managed to come up with this:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;form&gt;
  &lt;input type="text" value="" id="imagename"&gt;
  &lt;input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Which almost does exactly what I need -loads an image around what a user inputs. But what I want is not for the image to open in a new window, or download to my computer - I want it to display on the page when clicked as an image like <a href="http://jsfiddle.net/adeneo/pBXGe/" rel="noreferrer">the example here</a>.</p>
  
  <p>I'm sure that my inexperience with Javascript is the main cause of my being unable to figure this out. The script above is as far as I can get without screwing things up. Any help is appreciated.</p>