0
商品を取り除く機能があるショッピングリストのコードがあります。 （の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)removeChild（）パラメーター1のタイプが「ノード」でない
は、ここに私のコードです：私はクロームでそのコードを実行するときに何らかの理由で は、それはコンソールでこのエラーを返します。私は助けが必要な本当のエラーが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'を使用してください。あなたの関数は初期値に送信し、あなたが考えるものを渡すことはありません。 –