title: createElement img with javascript
body: <p>It does not show any image on the browser, I wonder where it goes wrong in creating the image? I had made a variable <code>imgFace</code> where <code>i</code> store the image and make the right properties for it but it does not seem to show anything.</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var numberOfFaces = 5;
  var theLeftSide = document.getElementById("LeftSide");
  
  function generateFaces() {
    var count = 0;
    while (count &lt;= numberOfFaces) {
      var imgFace = document.createElement("img");
      img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
      var random_nr = Math.random() * 400;
      random_nr = Math.floor(random_nr);
      imgFace.style.top = random_nr + "px";
      imgFace.style.left = random_nr + "px";
      theLeftSide.appendChild(imgFace);
      count++;
  
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>img {
    position: absolute;
  }
  
  div {
    position: absolute;
    width: 500px;
    height: 500px;
  }
  
  #RightSide {
    left: 500px;
    border-left: 1px solid black
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="generateFaces()"&gt;
    &lt;h1&gt;Matching Game&lt;/h1&gt;
    &lt;p&gt;Click on the extra smiling face on the left&lt;/p&gt;
    &lt;div id="LeftSide"&gt;
    &lt;/div&gt;
    &lt;div id="RightSide"&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>