javascript - 未捕获的类型错误 : Cannot read property 'lastChild' of null-6ren

javascript - 未捕获的类型错误 : Cannot read property 'lastChild' of null

转载作者：行者123 更新时间：2023-11-28 04:59:19

<!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>

我是 Javascript 初学者，在做作业时遇到了问题。这是事实匹配游戏，您必须单击左侧的额外面孔，游戏将继续，直到您单击左侧额外面孔以外的其他位置。上面是HTML文件，里面嵌入了JS代码。

我收到错误如下:Uncaught TypeError: Cannot read property 'lastChild' of null at line number 48, which is onclick event handler function on THE_LEFT_SIDE div 的lastChild。我不知道它是如何发生的以及我的代码有什么问题？任何线索将不胜感激。

最佳答案

您正尝试在将 id 为 leftSide 的元素添加到 DOM 之前访问该元素。

如果将脚本移至页面正文的末尾，您将不再看到此错误，而是看到一个不同的、不相关的错误:

<!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>