Put image on div randomly using javascript
<p>I am making matching game that images in left and right are different, and users have to find(I put one more image in left side).
My problem is that I cannot call image on where I want. What should I have to fix? Thank you.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;style&gt;
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #leftside {
      float: left;
    }
    #rightside {
      float: right;
      left: 500px;
      border-left: 1px solid black
    }
  &lt;/style&gt;
  &lt;script&gt;
    var numberOfFaces(5);
    var theLeftSide = document.getElementById("leftSide");

    function generateFaces() {
      var createElement("img");
      var position = Math.floor(Math.random() * 500);
      img.src = 'http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png';
      img.id = 'smileImage';
      createElement.setAttribute("height", position);
      createElement.setAttribute("width", position);
      document.getElementById('leftSide').appendChild(img);
    }
  &lt;/script&gt;
&lt;/head&gt;

&lt;body&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;

&lt;/html&gt;
</code></pre>