无法在“节点"上执行“removeChild":参数 1 的类型不是“节点" [英] Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
问题描述
我正在使用 Javascript 制作一个小游戏，其中有两个面.左侧有 5 张图片，右侧有 4 张图片.当用户单击左侧缺少的图片时，游戏进入下一关.我还没有写完整的代码.我写了下面的代码
<!DOCTYPE html><头><title>Matching Game part3</title><元字符集=UTF-8"><风格>图片{位置:绝对；}div{位置:绝对；宽度:500px；高度:500px；}#右边{左:500px；左边框:1px纯黑色；}</风格><body id ="theBody" onload="generateFaces();"><h1>配对游戏</h1><p>点击左边额外的笑脸</p><div id="左侧"></div><div id="右侧"></div><脚本>var numberOfFaces = 5;var theLeftSide = document.getElementById("leftside");var theRightSide = document.getElementById("rightside");函数 generateFaces(){for(var i =0; i</html> 我收到错误
<块引用>无法在节点"上执行removeChild":参数 1 的类型不是节点".
我已经阅读了 Stack Overflow 上的另外两篇文章，但无法理解如何修复我的错误.在代码中，我首先将所有图像都删除，然后删除最后一个子项，然后将所有图像添加到右侧所以它可以少1.所以如果有人可以帮忙.提前致谢.
你的脚本内联在主体中，所以它在主体被创建时运行 - 以及由 generateFaces() 函数肯定不会被它后面的代码访问(该方法是在主体加载期间运行脚本时创建的，但直到主体加载完成后才实际调用)>
我稍微重新排列了您的代码:
<!DOCTYPE html><头><title>Matching Game part3</title><元字符集=UTF-8"><风格>图片{位置:绝对；}div{位置:绝对；宽度:500px；高度:500px；}#右边{左:500px；左边框:1px纯黑色；}</风格><脚本>var numberOfFaces = 5;函数 generateFaces(){for(var i =0; i<body id ="theBody" onload="init()"><h1>配对游戏</h1><p>点击左边额外的笑脸</p><div id="左侧"></div><div id="右侧"></div></html> I am making a small game using Javascript in which there are two sides.In the left side there are 5 pics and in the right side there are 4 pics.When the user clicks on the missing picture on the left side then the game goes to the next level.I haven't written the full code yet.I have written the following code
<!--smile game-->
<!DOCTYPE html>
<html>
<head>
<title>Matching Game part3</title>
<meta charset = "UTF-8">
<style>
img
{
position: absolute;
}
div
{
position: absolute;
width: 500px;
height: 500px;
}
#rightside
{
left: 500px;
border-left: 1px solid black;
}
</style>
</head>
<body id ="theBody" 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>
<script>
var numberOfFaces = 5;
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
function generateFaces()
{
for(var i =0; i<numberOfFaces; i++)
{
var image = document.createElement("img");
image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
image.style.top = Math.floor(Math.random() * 400) + "px";
image.style.left = Math.floor(Math.random() * 400) + "px";
document.getElementById("leftside").appendChild(image);
}
}
leftsideimages = theLeftSide.cloneNode(true);
leftsideimages.removeChild(leftsideimages.lastChild);
theRightSide.appendChild(leftsideimages);
</script>
</body>
</html>
And I am getting the error
Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
I have gone through the two other posts here on Stack Overflow but cannot understand how to fix my error.In the code I am first clong all the images and then removing the last child and then adding all the images to the right side so that it can be 1 less.So if anyone could help. Thanks in advance.
Your script is inline in the body, so it's being run while the body is being created - and anything done by the generateFaces() function definitely won't be accessible by the code after it (the method is created when the script is run during the body load, but is not actually called until after the body is finished loading)
I've rearranged your code somewhat:
<!--smile game-->
<!DOCTYPE html>
<html>
<head>
<title>Matching Game part3</title>
<meta charset = "UTF-8">
<style>
img
{
position: absolute;
}
div
{
position: absolute;
width: 500px;
height: 500px;
}
#rightside
{
left: 500px;
border-left: 1px solid black;
}
</style>
<script>
var numberOfFaces = 5;
function generateFaces()
{
for(var i =0; i<numberOfFaces; i++)
{
var image = document.createElement("img");
image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
image.style.top = Math.floor(Math.random() * 400) + "px";
image.style.left = Math.floor(Math.random() * 400) + "px";
document.getElementById("leftside").appendChild(image);
}
}
function init() {
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
generateFaces();
leftsideimages = theLeftSide.cloneNode(true);
leftsideimages.removeChild(leftsideimages.lastChild);
theRightSide.appendChild(leftsideimages);
}
</script>
</head>
<body id ="theBody" onload="init()">
<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>
这篇关于无法在“节点"上执行“removeChild":参数 1 的类型不是“节点"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
