我正在写一个简单的html + js脚本，左边有一些图像，右边有一些图像，点击一个正确的元素（div的最后一个孩子）在左右两侧添加图像（+每次5）。 这是代码：
<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>
然而它给了我一个错误：
Uncaught TypeError: Cannot read property 'appendChild' of undefined
此外，我还编写了删除图像的代码，但这也无效。
答案 0 :(得分：0)
试试这个：
valueForKey将图像设置为<!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>
会将图像放在彼此
答案 1 :(得分：0)
更改功能参数名称
<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>