我創(chuàng)建了一個(gè)包含 HTML、CSS 和 Javascript 的列表，您可以在下面看到。它工作正常，直到我按“清除”并且列表被清除，并且清除按鈕也消失了。我仍在學(xué)習(xí) Javascript，不確定我的代碼中有什么問(wèn)題。有人可以幫忙我需要添加/刪除哪一行代碼來(lái)阻止此錯(cuò)誤的發(fā)生嗎？(() => { const listElement = document.getElementById('wishlist'); const newItem = document.getElementById('newItem'); const addBtn = document.getElementById('addBtn'); const clearBtn = document.getElementById('clearBtn'); //add new destination to the list function addItem(item) { const itemElement = document.createElement('li'); itemElement.textContent = item; const deleteButton = document.createElement('button'); deleteButton.textContent = 'x'; itemElement.appendChild(deleteButton); deleteButton.addEventListener('click', ev => { // <- new listElement.removeChild(itemElement); // <- new }); // <- new listElement.appendChild(itemElement); }; function clearList() { while (listElement.firstChild) { listElement.removeChild(listElement.firstChild); } } function renderList(list) { list.forEach(addItem); } addBtn.addEventListener('click', ev => { newItem.value.split(',').forEach(v => { if (v) { addItem(v); } }); newItem.value = null; }); clearBtn.addEventListener('click', ev => { clearList(); }); window.addEventListener('beforeunload', ev => { const items = [...listElement.childNodes]; if (items.length) { const list = items.map(item => { return item.textContent.slice(0, -1); }); localStorage.setItem('destination-list', list); } else { localStorage.removeItem('destination-list'); } }); window.addEventListener('DOMContentLoaded', ev => { const shoppingList = localStorage.getItem('destination-list'); if (destinationList) { renderList(destinationList.split(',')); } }); newItem.addEventListener("keyup", ev => { if (ev.key === "Enter") { addBtn.click(); } });})()
2 回答
ibeautiful
TA貢獻(xiàn)1993條經(jīng)驗(yàn) 獲得超6個(gè)贊
問(wèn)題是因?yàn)槟鷮⑶宄粹o保留在 ol 內(nèi)，并在按下清除時(shí)刪除列表的子項(xiàng)，將其移到 ol 之外，它將像下面這樣工作：
(() => {
const listElement = document.getElementById('wishlist');
const newItem = document.getElementById('newItem');
const addBtn = document.getElementById('addBtn');
const clearBtn = document.getElementById('clearBtn');
//add new destination to the list
function addItem(item) {
const itemElement = document.createElement('li');
itemElement.textContent = item;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'x';
itemElement.appendChild(deleteButton);
deleteButton.addEventListener('click', ev => { // <- new
listElement.removeChild(itemElement); // <- new
}); // <- new
listElement.appendChild(itemElement);
};
function clearList() {
while (listElement.firstChild) {
listElement.removeChild(listElement.firstChild);
}
}
function renderList(list) {
list.forEach(addItem);
}
addBtn.addEventListener('click', ev => {
newItem.value.split(',').forEach(v => {
if (v) {
addItem(v);
}
});
newItem.value = null;
});
clearBtn.addEventListener('click', ev => {
clearList();
});
window.addEventListener('beforeunload', ev => {
const items = [...listElement.childNodes];
if (items.length) {
const list = items.map(item => {
return item.textContent.slice(0, -1);
});
localStorage.setItem('destination-list', list);
} else {
localStorage.removeItem('destination-list');
}
});
window.addEventListener('DOMContentLoaded', ev => {
const shoppingList = localStorage.getItem('destination-list');
if (destinationList) {
renderList(destinationList.split(','));
}
});
newItem.addEventListener("keyup", ev => {
if (ev.key === "Enter") {
addBtn.click();
}
});
})()
ol{
padding: 1em 0;
margin: 0;
}
li button {
opacity: 0.05;
transition: 0.4s;
background: none;
border: none;
}
li:hover button {
opacity: 0.4;
}
li button:hover {
opacity: 1;
}
button, input {
font-size: inherit;
}
input {
padding-left: 1em;
flex: 1;
min-width: 5em;
}
#clearBtn{
width: 100%;
}
li button {
opacity: 0.05;
transition: 0.4s;
background: none;
border: none;
}
li:hover button {
opacity: 0.4;
}
li button:hover {
opacity: 1;
}
button, input {
font-size: inherit;
}
input {
padding-left: 1em;
flex: 1;
min-width: 5em;
}
<div class="destination-list">
<h2>Destination Wish List</h2>
<input placeholder="New Destination" id="newItem">
<button id="addBtn">Add</button>
<ol id="wishlist">
</ol>
<button id="clearBtn">Clear</button>
莫回?zé)o
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
<div class="destination-list">
<h2>Destination Wish List</h2>
<input placeholder="New Destination" id="newItem">
<button id="addBtn">Add</button>
<button id="clearBtn">Clear</button>
<ol id="wishlist">
</ol>
- 2 回答
- 0 關(guān)注
- 195 瀏覽
添加回答
舉報(bào)
0/150
提交
取消