尝试在Javascript待办事项列表中编辑按钮

我正在尝试创建一个具有以下功能的香草Javascript待办事项列表:

将待办事项添加到列表
通过点击li元素中的垃圾图标来删除待办事项(done)
通过点击编辑图标编辑相应的待办事项(我无法实现)
通过点击

我正在尝试添加编辑功能，请帮助我:

/*When user enter text in input field and click submit, an item should be added to the list
1. User enter text and click submit
2. When submit clicked, an item added to the list
3. When user click edit icon so, the list item is selected
4. Selected text should be editable
*/

const items = document.querySelectorAll('#list li');
const todoTextInput = document.getElementById('todoTextInput'); 
const submitBtn = document.getElementById('submit_todo');
const tabs = [];
// const liIndex;
//Add todo to the list
submitBtn.addEventListener('click', () => {
const todoText = document.getElementById('todoTextInput').value;
const todoList = document.getElementById('list');
const todoItem = document.createElement('li');
todoItem.classList.add('list-group-item', 'd-flex', 'justify-content-between');
todoItem.innerHTML = `
<span>${todoText}</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
`;
todoList.appendChild(todoItem);
tabs.push(todoText);
//Clearing input box
todoTextInput.value = '';

const editBtn = document.getElementsByClassName('editBtn');

// Selecting item by clicking edit button
for (let i = 0; i < editBtn.length; i++) {
editBtn[i].addEventListener('click', editItem);
}

const deleteBtn = document.getElementsByClassName('deleteBtn');

//Selecting item by clicking delete button
for (let i = 0; i < deleteBtn.length; i++) {
deleteBtn[i].addEventListener('click', deleteItem);
};
});

//Deleting selected item
function deleteItem() {
console.log("Deleted")
this.parentNode.parentNode.remove();
}

//Editing selected item
function editItem() {
const todoTextVal = this.parentNode.parentNode.firstElementChild.innerHTML;
const liIndex = tabs.indexOf(todoTextVal);
todoTextInput.value = todoTextVal;
console.log(todoTextVal + "Index -"+ liIndex);

tabs[liIndex].innerHTML = todoTextInput.value;
for (let i = 0; i < items.length; i++) {
tabs.push(items[i].innerHTML);

};
}

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
crossorigin="anonymous" />
<link rel="stylesheet" href="./style.css">
<script src="./todo.js" defer></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="form-group form-inline">
<input type="text" name="todoTextInput" id="todoTextInput" class="form-control">
<button type="submit" class="btn btn-outline-success m-2" id="submit_todo">Add Todo</button>
</div>
<ul class="list-group" id="list">
<!-- <li class="list-group-item d-flex justify-content-between">
<span>Apple</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Mango</span>
<span>
<a class="editBtn"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a class="deleteBtn"><i class="fa fa-trash" aria-hidden="true"></i></a>
</span>
</li> -->
</ul>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>

我推荐使用Google firebase>Firestore你可以在你的网站中使用它。有了它，你就可以创建一个小型数据库，你可以从其中读取数据或写入数据，这样一切都可以保存!

你可以看看这里的google firestore文档

相关内容

最新更新

热门标签：