How to resolve the following JS error?
Question
I am writing a simple html + js script which has a few images on left sides and one less on right side and on clicking a correct element(last child of the div) adds the images on both right and left sides(+5 everytime). Here's the code:
<html>
<head>
<style type="text/css">
img {
position:absolute;
}
div {
position:absolute;
width:500px;
height:500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
generateFaces(theLeftSide);
function generateFaces(theLeftSide) {
for (var i = 0; i < numberOfFaces; i++) {
var img = document.createElement("IMG");
img.src="smile.png";
img.style.top = Math.floor(Math.random() * 401);
img.style.height = 100;
img.style.left = Math.floor(Math.random() * 401);
theLeftSide.appendChild(img);
};
}
leftSideImages = theLeftSide.cloneNode(true);
var theRightSide = document.getElementById("rightSide");
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
var theBody = document.getElementsByTagName("body")[0];
theLeftSide.lastChild.onclick= function nextLevel(event){
theLeftSide.innerHTML='';
theRightSide.innerHTML='';
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
/* while(theLeftSide.firstChild)
{
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild)
{
theRightSide.removeChild(theRightSide.firstChild);
}*/1
};
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
</script>
</script>
</body>
</html>
However it's giving me an error:
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Also I have written code for deleting the images, this is also not working.
2 answers
solution1
0 2015-11-14 14:21:06
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*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>
<div id="leftSide"></div>
<div id="rightSide"></div>
<script src="jquery.js"></script>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
generateFaces();
function generateFaces() {
for (var i = 0; i < numberOfFaces; i++) {
(function(i) {
var img = document.createElement("img");
img.src="smile.png";
// img.style.top = Math.floor(Math.random() * 401);
img.style.height = 100;
// img.style.left = Math.floor(Math.random() * 401);
console.log('img');
theLeftSide.appendChild(img);
}(i));
console.log("running");
};
}
leftSideImages = theLeftSide.cloneNode(true);
var theRightSide = document.getElementById("rightSide");
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
var theBody = document.getElementsByTagName("body")[0];
theLeftSide.lastChild.onclick= function nextLevel(event){
theLeftSide.innerHTML='';
theRightSide.innerHTML='';
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
while(theLeftSide.firstChild)
{
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild)
{
theRightSide.removeChild(theRightSide.firstChild);
}
};
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
</script>
</body>
</html>
setting the images to absolute would put the images over eachother
solution2
0 2015-11-14 14:23:20
change your function parameter name
<html>
<head>
<style type="text/css">
img {
position:absolute;
}
div {
position:absolute;
width:500px;
height:500px;
}
#rightSide { left: 500px;
border-left: 1px solid black;
}
</style>
</head>
<body onload="generateFaces()">
<h1>Matching Game</h1>
<div id="leftSide"></div>
<div id="rightSide"></div>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
generateFaces(theLeftSide);
function generateFaces(the_Lef_tSide) {
for (var i = 0; i < numberOfFaces; i++) {
var img = document.createElement("IMG");
img.src="smile.png";
img.style.top = Math.floor(Math.random() * 401);
img.style.height = 100;
img.style.left = Math.floor(Math.random() * 401);
theLeftSide.appendChild(img);
};
}
leftSideImages = theLeftSide.cloneNode(true);
var theRightSide = document.getElementById("rightSide");
leftSideImages.removeChild(leftSideImages.lastChild);
theRightSide.appendChild(leftSideImages);
var theBody = document.getElementsByTagName("body")[0];
theLeftSide.lastChild.onclick= function nextLevel(event){
theLeftSide.innerHTML='';
theRightSide.innerHTML='';
event.stopPropagation();
numberOfFaces += 5;
generateFaces();
/* while(theLeftSide.firstChild)
{
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild)
{
theRightSide.removeChild(theRightSide.firstChild);
}*/1
};
theBody.onclick = function gameOver() {
alert("Game Over!");
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
</script>
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to resolve the error TypeError: x is not a function for testing of the following function in Jest?
Why circular reference error is occured in following code? and how to resolve it?
How to resolve CORS error in Fetch API js
How can i solve the following error while run the app : Could not resolve all files for configuration?
How can I resolve the following compilation error when running Jest for testing?
Three.js - how to resolve syntax error on delete in Eclipse
How to resolve NODE.Js HTTP POST "ECONNRESET" Error
How to resolve html/js Calculator Not A Number (NaN) Error?
How to resolve 401 error in react js using redux.?
How to resolve react export error for JSON in react js?
Related Tags