字符串到节点错误

Question

我在第 113 行遇到错误 - "Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'"。据我了解（我是初学者），问题是变量 "shoppingListItem" 不是节点，而是一个字符串。我该如何解决这个问题？

var shoppingList = {
  list: [{
    item: 'milk',
    isBought: false,
    itemCounter: 1
  }, {
    item: 'beer',
    isBought: false,
    itemCounter: 1
  }, {
    item: 'sugar',
    isBought: false,
    itemCounter: 1
  }],
  displayShoppingList: function() {
    //debugger;
    if (this.list.length > 0) {
      for (var x = 0; x < this.list.length; x++) {
        if (this.list[x].isBought === true) {
          console.log('(x)' + this.list[x].item);
        } else {
          console.log('( )' + this.list[x].item);
        }
      }
    } else {
      console.log('Your shopping list is empty');
    }
  },
  addToShoppingList: function(item) {
    this.list.push({
      item: item,
      isBought: false,
      itemCounter: 1
    });
    this.displayShoppingList();
  },
  changeShoppingList: function(place, newItem) {
    this.list[place].item = newItem;
    this.displayShoppingList();
  },
  changeCounter: function(place, newCounter) {
    this.list[place].itemCounter = newCounter;
    this.displayShoppingList();
  },
  makeItemBought: function(place) {
    this.list[place].isBought = !this.list[place].isBought;
    this.displayShoppingList();
  },
  deleteFromShoppingList: function(place) {
    this.list.splice(place, 1);
    this.displayShoppingList();
  },
  toggleAllItems: function() {
    var allItems = this.list.length;
    var boughtItems = 0;
    for (var y = 0; y < allItems; y++) {
      if (this.list[y].isBought === true) {
        boughtItems++;
      }
    }
    if (boughtItems === allItems) {
      for (var z = 0; z < allItems; z++) {
        this.list[z].isBought = false;
      }
    } else {
      for (var a = 0; a < this.list.length; a++) {
        this.list[a].isBought = true;
      }
    }
    this.displayShoppingList();
  }
};
var handlers = {
  showAll: function() {
    shoppingList.displayShoppingList();
  },
  toggleAll: function() {
    shoppingList.toggleAllItems();
    showOnScreen.displayShoppingList();
  },
  addToShoppingList: function() {
    var addToShoppingListInput = document.getElementById('addToShoppingListText');
    shoppingList.addToShoppingList(addToShoppingListInput.value);
    addToShoppingListInput.value = "";
    showOnScreen.displayShoppingList();
  },
  changeShoppingList: function() {
    var changeShoppingListInputNumber = document.getElementById('changeShoppingListNumber');
    var changeShoppingListInputText = document.getElementById('changeShoppingListText');
    shoppingList.changeShoppingList(changeShoppingListInputNumber.valueAsNumber, changeShoppingListInputText.value);
    changeShoppingListInputNumber.value = "";
    changeShoppingListInputText.value = "";
    showOnScreen.displayShoppingList();
  },

};

var showOnScreen = {
  displayShoppingList: function() {
    var shoppingUnorderedList = document.querySelector('ul');
    shoppingUnorderedList.innerHTML = '';
    for (var x = 0; x < shoppingList.list.length; x++) {
      var shoppingListItem = document.createElement('li');
      var isBoughtDisplay = '';
      if (shoppingList.list[x].isBought === true) {
        isBoughtDisplay = '(x)' + shoppingList.list[x].item + ' ' + shoppingList.list[x].itemCounter;
      } else {
        isBoughtDisplay = '( )' + shoppingList.list[x].item + ' ' + shoppingList.list[x].itemCounter;
      }
      shoppingListItem.textContent = isBoughtDisplay;

      shoppingListItem.appendChild(this.createDeleteButton); // error is here

      shoppingUnorderedList.appendChild(shoppingListItem);

    }


  },
  createDeleteButton: function() {
    var deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete item';
    deleteButton.className = 'deleteButtonClass';
    return deleteButton;
  }
};
//shoppingList.addToShoppingList('muffin');
//shoppingList.toggleAllItems();
//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)

<!DOCTYPE html>
<html>

<body>
  <h1>Список покупок</h1>
  <button onclick='showOnScreen.displayShoppingList()'>Show Shopping List</button>
  <button onclick='handlers.toggleAll()'>Toggle all on/off</button>
  <div>
    <input type='text' id='addToShoppingListText'>
    <button onclick='handlers.addToShoppingList()'>Add to shopping list</button>
  </div>
  <div>
    <input type='number' id='changeShoppingListNumber'>
    <input type='text' id='changeShoppingListText'>
    <button onclick='handlers.changeShoppingList()'>Change Shopping List Item</button>
  </div>
  <div>
    <input type='number' id='changeCounterPlace'>
    <input type='number' id='changeCounterValue'>
    <button onclick='handlers.changeCounter()'>Change number of items</button>
  </div>
  <ul>

  </ul>
  <script src="script.js"></script>
</body>

</html>

Answer 1

"createDeleteButton" 是一个函数，但你没有调用它。只需更改为：

shoppingListItem.appendChild(this.createDeleteButton());

它应该可以工作

字符串到节点错误

String to node error

javascript

append

typeerror

appendchild