Mohit Bajoria
6/6/2016 6:22:00 PM
Hello developers
There is a simple game in which after one onclick event is fired, second one is not working
I am pasting the code and u can use any image with name 'smile.png'
<!DOCTYPE html>
<html>
<head>
<style>
img {position: absolute;}
div {position: absolute; width:500px; height:500px}
#rightSide { left: 500px; border-left: 1px solid black; }
</style>
</head>
<body>
<h1>Matching Game</h1>
Click on the extra smiling face on the left.
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
var numberOfFaces = 5;
var i;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightSide");
var theBody = document.getElementsByTagName("body")[0];
var leftSideImages;
document.getElementsByTagName("body").onload = generateFaces();
function generateFaces(){
for(i=0;i<numberOfFaces; i++){
var image=document.createElement("img");
image.src="smile.png";
image.style.top=Math.floor(Math.random()*400)+"px";
image.style.left=Math.floor(Math.random()*400)+"px";
theLeftSide.appendChild(image);
}
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
return 0;
}
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
numberOfFaces += 5;
while(theLeftSide.firstChild){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild){
theRightSide.removeChild(theRightSide.firstChild);
}
generateFaces();
}
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
}
</script>
</body>
</html>
Please help out guys
Thanks
Mohit