[英]Why does my delete button not work unless I use a different delete button in a different div?
我正在學習 JavaScript 並嘗試創建一個待辦事項應用程序,當我 hover 我的活動列表時,我希望能夠在它處於活動狀態時刪除該列表的內容。 相反,當我單擊一個帶有虛擬數據的 div 時,它會刪除內容,我僅用作參考,它也有一個刪除按鈕。 這些是我需要幫助的片段。
我不知道還要寫什么。 顯然我需要更多的詞來問這個特定的問題,所以我只是隨機寫,這樣我就可以把它推出並尋求幫助。
https://jsfiddle.net/delo2795/xbp8vfeh/5/
const listsContainer = document.querySelector('[data-lists]')
listsContainer.addEventListener('mouseover', e => {
if (e.target.tagName.toLowerCase() === 'li') {
selectedListId = e.target.dataset.listID
console.log(selectedListId)
saveAndRender()
}
})
deleteListButton.addEventListener('click', e => {
// find lists of tasks that is not selected
lists = lists.filter(list => list.id !== selectedListId)
// take the list that is selected and remove from memory
selectedListId = null
saveAndRender()
})
newListForm.addEventListener('submit', e => {
e.preventDefault()
// Get information from the user form
const taskInput = taskname.value
const assignInput = assign.value
const descriptionInput = description.value
const dueDateInput = duedate.value
// user has to input something in the field
// if (taskInput == null || taskInput === '') return
// if (assignInput == null || assignInput === '') return
// if (descriptionInput== null || descriptionInput === '') return
// if (dueDateInput == null || dueDateInput === '') return
// create List
const list = createList(taskInput, assignInput, descriptionInput,dueDateInput)
// Update the List
lists.push(list)
// save List to Browser and Show List on Browser
saveAndRender()
})
function createList(taskInput, taskAssign, taskDescription, taskDueDate) {
// Initializes the variables and saves it to list
return {
id: Date.now().toString(),
taskInput: taskInput,
taskAssign: taskAssign,
taskDescription: taskDescription,
taskDueDate: taskDueDate,
taskCompleted: false
}
}
function render() {
clearElement(listsContainer)
lists.forEach(list => {
// create new list item container
const listElement = document.createElement('li')
listElement.dataset.listID = list.id
listElement.classList.add('list-group-item', 'shadow-lg', 'rounded')
if (list.id === selectedListId) {
listElement.classList.add('activeList')
}
}
}
render()
您應該使用數組來存儲數據。 當用戶點擊刪除按鈕(將被分配一個 function 像 DELETE(id))時,JS 將從數組中刪除它,然后從數組中重新呈現注釋。 這將有助於使您的應用程序更加結構化。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.