Randomly locating images in HTML using JavaScript
<p>Basically, what I want to realise is a matching game like this :</p>

<p><img src="https://i.stack.imgur.com/3IVGM.png" alt="javascript matching game"></p>

<p>I got lost when I was trying to add 2 sets of images randomly and here is my code.</p>

<p>HTML:
    </p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;meta author="qliuan" content="matching game"&gt;
    &lt;title&gt;Javascript Matching Game&lt;/title&gt;
&lt;/head&gt;

&lt;body onload="set_the_game()" id="theBody"&gt;
    &lt;h1&gt;Matching Game&lt;/h1&gt;
    &lt;p&gt;Please click on the extra image on the left hand side&lt;/p&gt;
    &lt;hr width="1" size="500"&gt;
    &lt;script src="matching_game.js"&gt;&lt;/script&gt;

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

<p>JS:</p>

<pre><code>var finished = false;
var total = 8;
var theBody = document.getElementById('theBody');

function set_the_game(){

while(!finished){

        for (var i = total; i &gt; 0; i--) {
            var this_img = document.createElement('img');
            var relative_img = document.createElement('img');
            this_img.src = "smileyface.png";
            relative_img.src = "smileyface.png";

            // I wanna set the image using horizontal and vertical locations
            var x1 = Math.random()*501;
            var y1 = Math.random()*501;
            x1 = Math.floor(x1);
            y1 = Math.floor(y1);
            x2 = x1 + 500;
            y2 = y1;

            this_img.style.left = x1 + "px";
            this_img.style.top = y1 + "px";
            the_body.appendChild(this_img);

            relative_img.style.left = x2 + "px";
            relative_img.style.top = y2 + "px";
            the_body.appendChild(relative_img);
        }
    }
}
</code></pre>

<p>The image file is in the same directory as the code files, but the images are not loading. </p>

<p>I cannot find any information about this particular problem on Google, maybe because it's too easy, but I do need your help.</p>