-1
Ich habe einen Fehler gefunden - "Uncaught TypeError: Ausführen von 'appendChild' auf 'Node': Parameter 1 ist nicht vom Typ 'Node'" in Zeile 113. Soweit ich verstehe (I bin ein Anfänger), das Problem ist, dass die Variable "shoppingListItem" kein Knoten, sondern ein String ist. Wie kann ich das beheben?String to Node Fehler
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>
nicht Codeblock missbrauchen. Die Regel, die Sie daran hindern, jsfiddle link ohne Codeblock hinzuzufügen, existiert aus einem Grund. –
Ich denke, das Problem liegt daran, dass Sie 'createDeleteButton' nicht in Zeile 113 aufrufen:' this.createDeleteButton' wird in 'this.createDeleteButton()' | geändert Auch für das nächste Mal, posten Sie den entsprechenden Code in der Frage selbst. Sie können immer noch einen JSFiddle-Link posten, jedoch nur als Extra. – yuriy636