0
我有一些代码购物清单，其中有一个函数来摆脱项目。 出于某种原因，当我运行在Chrome的代码，它返回这个错误在控制台： Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at removeItem (index.html:59) at addItem (index.html:50) at HTMLAnchorElement.onclick (index.html:142)removeChild（）参数1不是类型“节点”
这里是我的代码：（可能有一些其他的错误，如localStorage的不是工作，而是我可以修复这些。真正的错误，我需要帮助的是Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at removeItem (index.html:59) at addItem (index.html:50) at HTMLAnchorElement.onclick (index.html:142)）
<!DOCTYPE html>
<html>
<head>
<script src="https://use.fontawesome.com/6d2b2dd90b.js"></script>
<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded|Montserrat|Slabo+27px" rel="stylesheet">
<style>
li {
cursor: pointer;
}
ol {
text-align: center;
list-style-position: inside;
}
h1 {
font-family: 'Slabo 27px', sans-serif;
text-align: center;
font-size: 40px;
}
.form {
text-align: center;
}
input {
font-family: 'Encode Sans Expanded', sans-serif;
}
select {
font-family: 'Encode Sans Expanded', sans-serif;
}
a.test,
a:visited.test {
background-color: #f44336;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
a:hover.test,
a:active.test {
background-color: red;
}
</style>
<script>
function addItem() {
var NewListItem = document.createElement("li");
NewListItem.innerHTML = document.getElementById("box").value;
var box2 = document.getElementById("box2").value;
if (box2 != "- Pick a category -") {
var x = document.getElementById(box2);
document.getElementById(box2).appendChild(NewListItem);
NewListItem.onclick = removeItem(box2);
document.getElementById("box").value = "";
saveList();
} else {
/*error*/
}
}
function removeItem(Type) {
/*if (confirm("Are you sure you want to delete this item?\n Ok = Yes\n Cancel = No") == true) {*/
document.getElementById(Type).removeChild(this);
saveList();
/*} else {
\t \t saveList();
\t }*/
}
function saveList() {
localStorage.storedList = document.getElementById("body").innerHTML;
}
function loadList() {
document.getElementById("body").innerHTML = localStorage.storedList;
for (var i = 0; i < document.getElementById("Pantry").children.length; i++) {
var node = document.getElementById("Pantry").children[i];
document.getElementById("Pantry").children[i].onclick = document.getElementById("Pantry").removeChild(node);
}
for (var k = 0; k < document.getElementById("Fridge").children.length; k++) {
var node2 = document.getElementById("Fridge").children[i];
document.getElementById("Fridge").children[k].onclick = document.getElementById("Fridge").removeChild(node2);
}
for (var d = 0; d < document.getElementById("Baking").children.length; d++) {
var node3 = document.getElementById("Baking").children[i];
document.getElementById("Baking").children[d].onclick = document.getElementById("Baking").removeChild(node3);
}
for (var f = 0; f < document.getElementById("Laundry + Bathroom").children.length; f++) {
var node4 = document.getElementById("Laundry + Bathroom").children[i];
document.getElementById("Laundry + Bathroom").children[f].onclick = document.getElementById("Laundry + Bathroom").removeChild(node4);
}
for (var b = 0; b < document.getElementById("Gardening").children.length; b++) {
var node5 = document.getElementById("Gardening").children[i];
document.getElementById("Gardening").children[b].onclick = document.getElementById("Gardening").removeChild(node5);
}
}
</script>
</head>
<body id="body">
<div class="h1">
<h1>Shopping List</h1>
</div>
<div class="form">
<input type="text" id="box" placeholder="Name of item">
<a onclick="addItem();" class="test"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>
<br>
<select id="box2">
<option>- Pick a category -</option>
<option>Pantry</option>
<option>Fridge</option>
<option>Baking</option>
\t \t \t <option>Laundry + Bathroom</option>
\t \t \t <option>Gardening</option>
</select>
<br>
</div>
<br>
<fieldset>
<legend>Pantry</legend>
<ol id="Pantry" style="font-size: 110%; font-family: 'Montserrat', sans-serif;"></ol>
</fieldset>
<fieldset>
<legend>Fridge</legend>
<ol id="Fridge" style="font-size: 110%; font-family: 'Montserrat', sans-serif;"></ol>
</fieldset>
<fieldset>
<legend>Baking</legend>
<ol id="Baking" style="font-size: 110%; font-family: 'Montserrat', sans-serif;"></ol>
</fieldset>
<fieldset>
<legend>Laundry + Bathroom</legend>
<ol id="Laundry + Bathroom" style="font-size: 110%; font-family: 'Montserrat', sans-serif;"></ol>
</fieldset>
<fieldset>
<legend>Gardening</legend>
<ol id="Gardening" style="font-size: 110%; font-family: 'Montserrat', sans-serif;"></ol>
</fieldset>
<script>
if (localStorage.storedList) {
loadList();
}
</script>
</body>
</html>我已经看了很多有相同的错误我别的问题，但是他们都没有与之配合的答案我码。
感谢， AlwardL
您在调用removeChild之前是否尝试过记录该变量？它实际上是一个节点吗？ – Walk
我的回答是关于@Alan Larimer的回答。您应该在删除项目功能中使用“this”。因为你的函数发送到初始值，并且不会被传递给你想象的变量。 –