I've been attempting to create a matching game, where images are randomly positioned on the left and right sides. Despite using the random function, which is functioning correctly (confirmed with console.log), my images are not appearing in a random order, rather in a straight line.
Below is a snippet of my javascript, css, and html code....
var numberOfFaces=5;
var theLeftSide=document.getElementById("leftSide");
var imgHeight=80;
var imgWidth=80;
function generateFaces(){
while(numberOfFaces>0){
var smileImg=document.createElement("img");
smileImg.src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smileImg.style.height=imgHeight + "px";
smileImg.style.width=imgWidth + "px";
var randomTop=Math.random() * 400;
randomTop=Math.floor(randomTop);
console.log(randomTop);
var randomLeft=Math.random() * 500;
randomLeft=Math.floor(randomLeft);
console.log(randomLeft);
smileImg.style.top= randomTop + "px";
smileImg.style.left=randomLeft + "px";
leftSide.appendChild(smileImg);
numberOfFaces--;
}
}body{
margin:50px;
}
p{
text-align:center;
font-size:18px;
}
#outer{
border:0.5px solid black;
position:realtive;
height:500px;
margin:20px;
}
#rightSide,#leftSide{
width:500px;
height:500px;
position:absolute;
}
#rightSide{
left:700px;
border-left:2px solid black;
}<html>
<head>
<link rel="stylesheet" type="text/css" href="MatchingGame.css" media="screen" />
<script type="text/javascript" src="MatchingGame.js" ></script>
<title>Matching Game</title>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left side.</p>
<div id="outer">
<div id="leftSide"></div>
<div id="rightSide"></div>
</div>
</body>
</html>