-1
我遇到了一個錯誤 - 「未捕獲的TypeError：無法執行'節點'上的'appendChild'：參數1不是類型'Node'」在行113上。據我瞭解（我是初學者），問題是變量「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>
不濫用代碼塊。阻止你添加沒有代碼塊的jsfiddle鏈接的規則存在的原因 –
我認爲這個問題是因爲你沒有在第113行調用'createDeleteButton'：'this.createDeleteButton'改爲'this.createDeleteButton（）'|同樣在下一次，在問題本身中發佈相關代碼。您仍然可以發佈JSFiddle鏈接，但僅作爲附加內容。 – yuriy636