Groups > comp.lang.javascript > #30637 > unrolled thread

Javascript - onclick event not working twice

Started by	Mohit Bajoria <mohitbajo36@gmail.com>
First post	2016-06-06 11:22 -0700
Last post	2016-06-07 13:53 +0700
Articles	2 — 2 participants

Back to article view | Back to comp.lang.javascript

  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

#30637 — Javascript - onclick event not working twice

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

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

[toc] | [next] | [standalone]

#30641

From	JJ <jj4public@vfemail.net>
Date	2016-06-07 13:53 +0700
Message-ID	<1clnlkvi8sk5h.1bb7axl2tzlob.dlg@40tude.net>
In reply to	#30637

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/g73PRTnz>

[toc] | [prev] | [standalone]

csiph-web

Javascript - onclick event not working twice

Contents

#30637 — Javascript - onclick event not working twice

#30641