My objective is to create a new variable called theRightSide that points to the right side div.
var theRightSide =
document.getElementById("rightSide");
Once all the images are added to the leftSide div, I need to use cloneNode(true) to copy the leftSide div. For example, leftSideImages = theLeftSide.cloneNode(true); Then, delete the last child of leftSideImages. Finally, add leftSideImages to the rightSide div.
Below is 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");
function generateFaces(){
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);
</script>
</body>
</html>
Error: Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
Please assist me in rectifying these two errors.