未捕获TypeError：无法读取属性'lastChild'为null [英] Uncaught TypeError: Cannot read property 'lastChild' of null
本文介绍了未捕获TypeError：无法读取属性'lastChild'为null的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< pre class =snippet-code-html lang-html prettyprint-override>
<！DOCTYPE html>< html>< head> < title>脸部匹配游戏< / title> < h2>匹配游戏< / h2> < p>点击左侧的EXTRA面< / p> < style type =text / css> div {position：absolute; width：640px;身高：550px; background-color：maroon} img {position：absolute; width：100px; height：100px} #rightSide {left：650px; border-left：2px solid black; }< /风格> < script type =text / javascript> var NUM_OF_FACES = 0; var THE_LEFT_SIDE，THE_RIGHT_SIDE; //生成面的函数generateFaces（）{THE_LEFT_SIDE = document.getElementById（leftSide）; THE_RIGHT_SIDE = document.getElementById（rightSide）; NUM_OF_FACES + = 5; var image;而（NUM_OF_FACES> 0）{image = document.createElement（img）; image.src =smile.png; image.style.top = Math.floor（Math.random（）*（THE_LEFT_SIDE.offsetHeight - 100））+px; image.style.left = Math.floor（Math.random（）*（THE_LEFT_SIDE.offsetWidth - 100））+px; THE_LEFT_SIDE.appendChild（图像）; NUM_OF_FACES - = 1; //console.log(image.style.top，image.style.left）} var leftSideImages = THE_LEFT_SIDE.cloneNode（true）; leftSideImages.removeChild（leftSideImages.lastChild）; THE_RIGHT_SIDE.appendChild（leftSideImages）; } // end generatefaces（）function deleteFaces（argument）{while（THE_LEFT_SIDE.firstChild）{THE_LEFT_SIDE.removeChild（THE_LEFT_SIDE.firstChild）; }而（THE_RIGHT_SIDE.firstChild）{THE_RIGHT_SIDE.removeChild（THE_RIGHT_SIDE.firstChild）; }} // end deleteFaces（）var theBody = document.getElementsByTagName（body）[0]; THE_LEFT_SIDE = document.getElementById（leftSide）; THE_RIGHT_SIDE = document.getElementById（rightSide）; //事件处理THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel（）{alert（你点击了正确的脸）; deleteFaces（）; generatefaces（）; }; theBody.onclick = function gameOver（）{alert（Game Over !!）; theBody.onclick = null; THE_LEFT_SIDE.lastChild.onclick = null; }; < / script>< / head>< body onload =generateFaces（）> < div id =leftSide>< / div> < div id =rightSide>< / div>< / body>< / html>
我是Javascript的初学者，在做作业时遇到问题。
这是事实匹配游戏，你必须点击左边的额外的脸，游戏继续，直到你点击别的地方，而不是额外的脸。
以上是HTML文件，JS代码嵌入到其中。
我收到错误：未捕获TypeError：无法读取行号为48的属性'lastChild'为空，这是 onclick 事件处理函数 lastChild THE_LEFT_SIDE div。我不知道它是怎么来的，我的代码有什么问题？
任何潜在客户将不胜感激。
解决方案
您正尝试访问id为$ $ c的元素$ c> leftSide ，然后再将其添加到DOM。
如果将脚本移动到页面末尾身体，你将不再看到这个错误，而是一个不同的，不相干的一个：
<！DOCTYPE html>< html>< head> < title>脸部匹配游戏< / title> < h2>匹配游戏< / h2> < p>点击左侧的EXTRA面< / p> < style type =text / css> div {position：absolute; width：640px;身高：550px; background-color：maroon} img {position：absolute; width：100px; height：100px} #rightSide {left：650px; border-left：2px solid black; }< /风格> < / head>< body onload =generateFaces（）> < div id =leftSide>< / div> < div id =rightSide>< / div> < script type =text / javascript> var NUM_OF_FACES = 0; var THE_LEFT_SIDE，THE_RIGHT_SIDE; //生成面的函数generateFaces（）{THE_LEFT_SIDE = document.getElementById（leftSide）; THE_RIGHT_SIDE = document.getElementById（rightSide）; NUM_OF_FACES + = 5; var image;而（NUM_OF_FACES> 0）{image = document.createElement（img）; image.src =smile.png; image.style.top = Math.floor（Math.random（）*（THE_LEFT_SIDE.offsetHeight - 100））+px; image.style.left = Math.floor（Math.random（）*（THE_LEFT_SIDE.offsetWidth - 100））+px; THE_LEFT_SIDE.appendChild（图像）; NUM_OF_FACES - = 1; //console.log(image.style.top，image.style.left）} var leftSideImages = THE_LEFT_SIDE.cloneNode（true）; leftSideImages.removeChild（leftSideImages.lastChild）; THE_RIGHT_SIDE.appendChild（leftSideImages）; } // end generatefaces（）function deleteFaces（argument）{while（THE_LEFT_SIDE.firstChild）{THE_LEFT_SIDE.removeChild（THE_LEFT_SIDE.firstChild）; }而（THE_RIGHT_SIDE.firstChild）{THE_RIGHT_SIDE.removeChild（THE_RIGHT_SIDE.firstChild）; }} // end deleteFaces（）var theBody = document.getElementsByTagName（body）[0]; THE_LEFT_SIDE = document.getElementById（leftSide）; THE_RIGHT_SIDE = document.getElementById（rightSide）; //事件处理THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel（）{alert（你点击了正确的脸）; deleteFaces（）; generatefaces（）; }; theBody.onclick = function gameOver（）{alert（Game Over !!）; theBody.onclick = null; THE_LEFT_SIDE.lastChild.onclick = null; }; < / script>< / body>< / html>
<!DOCTYPE html>
<html>
<head>
<title>Face Matching Game</title>
<h2>Matching Game</h2>
<p>Click on the EXTRA face on the left side</p>
<style type="text/css">
div { position: absolute; width: 640px; height: 550px; background-color: maroon }
img { position: absolute; width: 100px; height: 100px}
#rightSide { left: 650px; border-left: 2px solid black; }
</style>
<script type="text/javascript">
var NUM_OF_FACES = 0;
var THE_LEFT_SIDE, THE_RIGHT_SIDE;
//Function to generate faces
function generateFaces() {
THE_LEFT_SIDE = document.getElementById("leftSide");
THE_RIGHT_SIDE = document.getElementById("rightSide");
NUM_OF_FACES += 5;
var image;
while(NUM_OF_FACES>0){
image = document.createElement("img");
image.src = "smile.png";
image.style.top = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetHeight - 100)) + "px";
image.style.left = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetWidth - 100)) + "px";
THE_LEFT_SIDE.appendChild(image);
NUM_OF_FACES -= 1;
//console.log(image.style.top, image.style.left )
}
var leftSideImages = THE_LEFT_SIDE.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
THE_RIGHT_SIDE.appendChild(leftSideImages);
}//end generatefaces()
function deleteFaces(argument) {
while(THE_LEFT_SIDE.firstChild){
THE_LEFT_SIDE.removeChild(THE_LEFT_SIDE.firstChild);
}
while(THE_RIGHT_SIDE.firstChild){
THE_RIGHT_SIDE.removeChild(THE_RIGHT_SIDE.firstChild);
}
}//end deleteFaces()
var theBody = document.getElementsByTagName("body")[0];
THE_LEFT_SIDE = document.getElementById("leftSide");
THE_RIGHT_SIDE = document.getElementById("rightSide");
//Event handling
THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel() {
alert("You clicked on correct face.");
deleteFaces();
generatefaces();
};
theBody.onclick = function gameOver() {
alert("Game Over!!");
theBody.onclick = null;
THE_LEFT_SIDE.lastChild.onclick = null;
};
</script>
</head>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
</body>
</html>
I am beginner in Javascript and ran into a problem while doing an assignment. It is Fact Matching game and you have to click the extra face on the left side and game continues until you click somewhere else than extra face on left. Above is the HTML file and JS code is embedded in it.
I am getting an error as: Uncaught TypeError: Cannot read property 'lastChild' of null at line number 48, which is onclick event handler function on lastChild of THE_LEFT_SIDE div. I don't know how it is coming and what is the problem with my code?
Any leads will be appreciated.
解决方案
You are trying to access the element with id leftSide before it has been added to the DOM.
If you move your script to the end of the page body, you will no longer see this error, but a different, unrelated one instead:
<!DOCTYPE html>
<html>
<head>
<title>Face Matching Game</title>
<h2>Matching Game</h2>
<p>Click on the EXTRA face on the left side</p>
<style type="text/css">
div { position: absolute; width: 640px; height: 550px; background-color: maroon }
img { position: absolute; width: 100px; height: 100px}
#rightSide { left: 650px; border-left: 2px solid black; }
</style>
</head>
<body onload="generateFaces()">
<div id="leftSide"></div>
<div id="rightSide"></div>
<script type="text/javascript">
var NUM_OF_FACES = 0;
var THE_LEFT_SIDE, THE_RIGHT_SIDE;
//Function to generate faces
function generateFaces() {
THE_LEFT_SIDE = document.getElementById("leftSide");
THE_RIGHT_SIDE = document.getElementById("rightSide");
NUM_OF_FACES += 5;
var image;
while(NUM_OF_FACES>0){
image = document.createElement("img");
image.src = "smile.png";
image.style.top = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetHeight - 100)) + "px";
image.style.left = Math.floor(Math.random()* (THE_LEFT_SIDE.offsetWidth - 100)) + "px";
THE_LEFT_SIDE.appendChild(image);
NUM_OF_FACES -= 1;
//console.log(image.style.top, image.style.left )
}
var leftSideImages = THE_LEFT_SIDE.cloneNode(true);
leftSideImages.removeChild(leftSideImages.lastChild);
THE_RIGHT_SIDE.appendChild(leftSideImages);
}//end generatefaces()
function deleteFaces(argument) {
while(THE_LEFT_SIDE.firstChild){
THE_LEFT_SIDE.removeChild(THE_LEFT_SIDE.firstChild);
}
while(THE_RIGHT_SIDE.firstChild){
THE_RIGHT_SIDE.removeChild(THE_RIGHT_SIDE.firstChild);
}
}//end deleteFaces()
var theBody = document.getElementsByTagName("body")[0];
THE_LEFT_SIDE = document.getElementById("leftSide");
THE_RIGHT_SIDE = document.getElementById("rightSide");
//Event handling
THE_LEFT_SIDE.lastChild.onclick = function goToNextLevel() {
alert("You clicked on correct face.");
deleteFaces();
generatefaces();
};
theBody.onclick = function gameOver() {
alert("Game Over!!");
theBody.onclick = null;
THE_LEFT_SIDE.lastChild.onclick = null;
};
</script>
</body>
</html>
这篇关于未捕获TypeError：无法读取属性'lastChild'为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
