我有一些代碼購物清單,其中有一個函數來擺脫項目。 出於某種原因,當我運行在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」。因爲你的函數發送到初始值,並且不會被傳遞給你想象的變量。 –