Question

我有一些购物清单的代码，其中有一个功能来摆脱物品。出于某种原因，当我在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)

这是我的代码:(可能还有其他一些错误，例如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 {
		  saveList();
	  }*/
    }

    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>
			<option>Laundry + Bathroom</option>
			<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

Answer 1

注意添加项目时如何抛出错误？

NewListItem.onclick = removeItem(box2);正在尝试将函数调用结果的值分配给单击事件。

您正在将值（而不是节点）传递给函数：var box2 = document.getElementById("box2").value;

请参阅DOM on-event handlers。

removeChild（）参数1不是'node'类型

1 个答案: