Dom html javascript about onclick

Question

I want to generate five image imgs first in left side, then remove the lastchild of it and copy the rest to the right side. If user clicks the extra img in left side, then clear all and generate more 5(10) img in left and copy 9 to the right side, and so on. If user clicks the wrong place, alert ("game over").Here is my code:

<html>
<head>
<style>
	img{
		position: absolute;
	}
	div{
		position: absolute;
		width: 500px;
		height: 500px;
	}
	#rightSide { left: 500px; 
            	border-left: 1px solid black;
    }

</style>
<script>
	 var numberOfFaces = 5;
	 
	function generateFaces(){
		
		var theLeftSide = document.getElementById("leftSide");
		for (var i = 0; i < numberOfFaces; i++){
			var img = document.createElement("img");
			img.src = "smile.png";
			
			var randomTop = Math.random() * 400;
			var randomLeft = Math.random() * 400;
			img.style.top = randomTop + "px";
			img.style.left = randomLeft + "px";
			theLeftSide.appendChild(img);
		}
		var theRightSide = document.getElementById("rightSide");
		leftSideImages = theLeftSide.cloneNode(true);
		leftSideImages.removeChild(leftSideImages.lastChild);
		document.getElementById("rightSide").appendChild(leftSideImages);
		var theBody = document.getElementByTagName("body")[0];
		theLeftSide.lastChild.onclick = function nextLevel(event){
			event.stopPropagation();
			while (theBody.firstChild){
				theBody.removeChild(theBody.firstChild);
			}
			numberOfFaces += 5;
			generateFaces();
		}
		theBody.onclick = function gameover(){
			alert("Game Over");
			thBody.onclick = null;
			theLeftSide.lastChild.onclick = null;

		}
		
	}

	window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>

</html>

I could generate and clone at first time, but when I click, nothing happens, so what is the problem?

Tiefan Ju · Accepted Answer · 2017-07-23 08:44:18Z

3

This may be a typing error.

var theBody = document.getElementsByTagName("body")[0];

your code: var theBody = document.getElementByTagName("body")[0];

I suggest to use a good editor for html. I fixed the error with Jetbrain phpStorm but better ones may exist.

answered Jul 23, 2017 at 8:44

Tiefan Ju

5203 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CPP Over a year ago

Thanks, now when I click body, it shows "game over", but if I click the right extra img, it just removed all the imgs and not generate new 5 more imgs on both sides, what is the problem? Thanks.

Tiefan Ju Over a year ago

after calling theBody.removeChild(theBody.firstChild), there isn't <div id="leftSide">, so the leftSide = document.getElementById("leftSide") occur an error. you should use theLeftSide instead of theBody in while and removeChild.

Cristian Rusanu · Accepted Answer · 2017-07-23 10:02:21Z

Bellow is a modified version that worked for me. Notice that in this version I added the events on all children instead of the whole document body. I don't know but for me it feels more accurate not to end the game on a user clicks on a white space for example.

<html>
<head>
<style>
    img{
        position: absolute;
    }
    div{
        position: absolute;
        width: 500px;
        height: 500px;
    }
    #rightSide { left: 500px; 
                border-left: 1px solid black;
    }

</style>
<script>
     var numberOfFaces = 5;

     var theBody; 
     var theLeftSide; 
     var theRightSide;

    function generateFaces(){

        theBody = document.getElementsByTagName("body")[0];
        theLeftSide = document.getElementById("leftSide");
        theRightSide = document.getElementById("rightSide");

        for (var i = 0; i < numberOfFaces; i++){
            var img = document.createElement("img");
            img.src = "smile.png";

            var randomTop = Math.random() * 400;
            var randomLeft = Math.random() * 400;
            img.style.top = randomTop + "px";
            img.style.left = randomLeft + "px";
            if(theLeftSide != null)
                theLeftSide.appendChild(img);
            else
                {
                    alert("Game Over");
                    return;
                }
        }

        var leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        document.getElementById("rightSide").appendChild(leftSideImages);

        addEvents();

    }

    function addEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = nextLevel;
            } 
    }

    function removeEvents(){
        for(var i=0; i < theLeftSide.childNodes.length; i++){
                theLeftSide.childNodes[i].onclick = null;
            } 

    }

     function nextLevel(event){
        if(this == theLeftSide.lastChild){
            event.stopPropagation();
            theLeftSide.innerHTML = "";
            theRightSide.innerHTML = "";
            numberOfFaces += 5;
            generateFaces();
        }
        else
        {
            alert("Game Over");
            removeEvents();
        }
    }

    window.onload = generateFaces;
</script>
</head>
<body>
<h1>Matching Game</h1>
<p>click on the extra smiling face on the left</p>
<div id = "leftSide">
</div>
<div id = "rightSide">
</div>
</body>

</html>

Collectives™ on Stack Overflow

Dom html javascript about onclick

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related