javascript 无法读取 null 的属性“appendChild”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33578645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'appendChild' of null
提问by tajammul pasha
This is my code, and I'm a beginner in java script.
这是我的代码，我是java脚本的初学者。
<!doctype html>
<html>
<head>
<style>
div {position:absolute; width:500px; height:500px}
img {position:absolute}
#rightSide { left: 500px;
border-left: 1px solid black }
</style>
<script>
function generateFaces() {
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightside");
for (var i = 1; i <= numberOfFaces; i++) {
this_img = document.createElement("img");
this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
var topIndex = Math.floor(Math.random() * 401);
var leftIndex = Math.floor(Math.random() * 401);
this_img.style.top = topIndex + "px";
this_img.style.left = leftIndex + "px";
this_img.style.position = "absolute";
theLeftSide.appendChild(this_img);
theLeftimages = document.cloneNode(true);
theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
theRightSide.appendChild(theLeftimages);
};
}
</script>
</head>
<body onload = "generateFaces()">
<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> the part where problem occurs is in function generate faces
出现问题的部分是在函数中生成人脸
function generateFaces() {
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftSide");
var theRightSide = document.getElementById("rightside");
for (var i = 1; i <= numberOfFaces; i++) {
this_img = document.createElement("img");
this_img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
var topIndex = Math.floor(Math.random() * 401);
var leftIndex = Math.floor(Math.random() * 401);
this_img.style.top = topIndex + "px";
this_img.style.left = leftIndex + "px";
this_img.style.position = "absolute";
theLeftSide.appendChild(this_img);
theLeftimages = document.cloneNode(true);
theLeftimages = theLeftimages.removeChild(theLeftimages.lastChild);
theRightSide.appendChild(theLeftimages);
};
}when I append child using theRightSide.appendChild(theLeftimages); it shows an error as
当我使用 theRightSide.appendChild(theLeftimages) 附加孩子时；它显示错误为
Uncaught TypeError: Cannot read property 'appendChild' of null.
未捕获的类型错误：无法读取 null 的属性“appendChild”。
and I cant clone the images to the right side div.
我无法将图像克隆到右侧 div。
回答by Tree Nguyen
Javascript is case sensitive. It should be rightSide
Javascript 区分大小写。应该是右边
var theRightSide = document.getElementById("rightSide");
Since it doesn't get the element, it return Null to theRightSide, which clearly doesn't have appendChild function :)
由于它没有得到元素，它返回 Null 到 theRightSide，它显然没有 appendChild 函数:)
回答by andlrc
document.getElementById(...)will return nullif it cannot find an element with the given id.
document.getElementById(...)null如果找不到具有给定 id 的元素，将返回。
// You need to change:
var theRightSide = document.getElementById("rightside");
// To:
var theRightSide = document.getElementById("rightSide");
// ^ See capital 'S'
