title: The output image does not appear
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action=""&gt;
      
          &lt;h2&gt;Fill out the following details: &lt;/h2&gt;
          
          &lt;div class="inp"&gt;
              &lt;label for="name"&gt;Name: &lt;/label&gt;
              &lt;input type="text" id="name"&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="inp"&gt;
              &lt;label for="rollno"&gt;Roll No: &lt;/label&gt;
              &lt;input type="text" id="rollno"&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="inp"&gt;
              &lt;label for="image"&gt;Image: &lt;/label&gt;
              &lt;input type="file" id="image" accept="image/jpeg"&gt;
          &lt;/div&gt;
          &lt;input type="button" id="submit" value="Submit"&gt;
  
  &lt;/form&gt;
  
  &lt;div id="output"&gt;
      
          &lt;h2&gt;Your Details: &lt;/h2&gt;
          
          &lt;div class="out"&gt;Name: &lt;span id="outname"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="out"&gt;Roll No: &lt;span id="outrollno"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="out"&gt;Image: &lt;img id="outimage" width="200px"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      
          function displayImage()
          {
              var x = document.getElementById("outimage");
              var y = document.getElementById("image").src;
              x.setAttribute("src",y);
          }
          
          document.getElementById("submit").onclick = function()
          {
              document.getElementById("output").style.display = "block";
              document.getElementById("outname").innerHTML = document.getElementById("name").value;
              document.getElementById("outrollno").innerHTML = document.getElementById("rollno").value;
              displayImage();
          }
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Can someone tell me why is this happening? The image is in the same folder as the HTML file. Is there a better way to achieve this? I want to display the image that is selected in the form by the user.</p>
  <p><img src="https://i.stack.imgur.com/aWzfr.png" alt="This is the output that I'm getting" /></p>