[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Javascript - onclick event not working twice

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
1 Answer

JJ

6/7/2016 6:53:00 AM

0

On Mon, 6 Jun 2016 11:22:13 -0700 (PDT), Mohit Bajoria wrote:
> 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'
[snip]

This line has 3 errors:

document.getElementsByTagName("body").onload = generateFaces();

1. Keep in minds that getElementsByTagName() is to get elements, not
element. So the correct code should have been:

document.getElementsByTagName("body")[0] //...

2. A HTML page may only have one BODY element, so there's no point on using
getElementsByTagName(), especially since there's document.body already
available. Thus, it would be better like this:

document.body //...

3. The onload property is assigned with the return value of generateFaces(),
not the reference to the function itself. So...

document.body = generateFaces;

However, the code below generateFaces() which is executed immediately,
refers to theLeftSide.lastChild which won't exist until generateFaces() has
been executed, that code will fail. So, wrap the remaining code in another
function (e.g. init() ) and use it as the onload handler instead of
generateFaces(). Move generateFaces() execution into the start of init()
instead.

Full fixed code:

<http://pastebin.com/g7...