Javascript - onclick event not working twice

Newsgroups	comp.lang.javascript
Date	2016-06-06 11:22 -0700
Message-ID	<2bebddfb-a511-4c09-8f42-e4e8bd0525f8@googlegroups.com> (permalink)
Subject	Javascript - onclick event not working twice
From	Mohit Bajoria <mohitbajo36@gmail.com>

Show all headers | View raw

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

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Javascript - onclick event not working twice Mohit Bajoria <mohitbajo36@gmail.com> - 2016-06-06 11:22 -0700
  Re: Javascript - onclick event not working twice JJ <jj4public@vfemail.net> - 2016-06-07 13:53 +0700

csiph-web