title: Javascript: show selected image
body: <p>I was trying to make it so when you select your image it will show it directly. Ofcourse you do this in a <code>onchange</code> thing in html. This is what i have by now: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showImage(src, target) {
      var fr = new FileReader();
  
      fr.onload = function (e) { target.src = this.result; };
  
      src.addEventListener("change", function () {
  
          fr.readAsDataURL(src.files[0]);
      });
  
  }
  function putImage() {
      var src = document.getElementById("select_image");
      var target = document.getElementById("target");
      showImage(src, target);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="target" /&gt;
  &lt;input type="file" id="select_image" name="image" onchange="putImage()"&gt; &lt;/input&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works not for me in a weird way. Because the onchange works. I can test that by alerting something on the event. That works great. The javascript works too in a jsfiddle.. But these things combined not. I hope someone can help</p>