Question

我正在尝试使用具有以下功能的 vanilla Javascript 创建待办事项列表：

将待办事项添加到列表中
通过点击 li 元素中的垃圾桶图标删除待办事项（完成）
通过单击编辑图标（我无法实现）编辑相应的待办事项
点击复选框划掉已完成的待办事项

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

/*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>

Answer 1

我建议使用 google firebase > Firestore 您可以在您的网站中将其与 vanilla javascript 一起使用。有了它，您就可以制作一个小型数据库，您可以在其中读取或写入数据，从而节省一切！

您可以查看 google firestore 文档 here。

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

1 个答案: