javascript - 如何解决待办事项列表 Web 应用程序中的错误

Question

目前正在尝试使用 JavaScript 并构建一个待办事项列表 Web 应用程序。有一些问题。当我刷新页面时，出现错误:

TypeError: tasks is null

当我按下提交按钮时，它给出了错误:

TypeError: cyclic object value

我在阅读了有关 JavaScript 的在线教程后尝试了它，然后我想到了用像这样的一些基本元素来实现它。 我该如何解决这些错误？我似乎无法找出解决方案。

JS 代码:

document.getElementById('form-Task').addEventListener('submit', saveTask);

// Save new To-Do Item
function saveTask(e){

let title = document.getElementById('title').value;
let description = document.getElementById('description').value;

let task = {
    title,
    description
};

if(localStorage.getItem('tasks') === null) {
    let = tasks = [];
    tasks.push(tasks);
    localStorage.setItem('tasks', JSON.stringify(tasks));
} else {
    let tasks = JSON.parse(localStorage.getItem('tasks'));
    tasks.push(task);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

getTasks();

// Reset form-Task
document.getElementById('form-Task').reset();
e.preventDefault();
}




// Delete To-Do Item
function deleteTask(title) {

let tasks = JSON.parse(localStorage.getItem('tasks'));
for (let i = 0; i < tasks.length; i++){
    if(tasks[i].title == title) {
        tasks.splice(i, 1);
    }
}

localStorage.setItem('tasks', JSON.stringify(tasks));
getTasks();
}




// Show To-Do List
function getTasks(){

let tasks = JSON.parse(localStorage.getItem('tasks'));
let tasksView = document.getElementById('tasks');
tasksView.innerHTML = '';

for(let i = 0; i < tasks.length; i++){
    let title = tasks[i].title;
    let description = tasks[i].description;

    tasksView.innerHTML +=
    `<div class="card mb-3">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-3 text-left">
                    <p>${title}</p>
                </div>
                <div class="col-sm-7 text-left">
                    <p>${description}</p>
                </div>
                <div class="col-sm-2 text-right">
                    <a href="#" onclick="deleteTask('${title}')" class="btn btn-danger ml-5">X</a>             
                </div>
            </div>
        </div>
    </div>`;
}
}

getTasks();

HTML 代码:

<nav class="navbar navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">My To-Do List</a>
    </div>
</nav>

<div class="container">
    <div class="row my-5">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <form id="form-Task">
                        <div class="form-group">
                            <input type="text" id="title" class="form-control" maxlength="50" autocomplete="off" placeholder="Title" required>
                        </div>
                        <div class="form-group">
                            <textarea type="text" id="description" cols="30" rows="10" class="form-control" maxlength="500" autocomplete="off" placeholder="Description" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-success btn-block">Save</button>
                    </form>
                </div>

            </div>
        </div>

        <div class="col-md-8">
            <div class="row">
                <div class="col-sm-3 text-left">
                    <p class="font-weight-bold">Title</p>
                </div>
                <div class="col-sm-6 text-left">
                    <p class="font-weight-bold">Description</p>
                </div>
                <div class="col-sm-3 text-right">
                    <p class="font-weight-bold">Delete</p>
                </div>
            </div>
            <hr>
            <div id="tasks"></div>

        </div>

    </div>

</div>

<script src="js/app.js"></script>

Answer 1

我仍在学习 javascript，所以我可能错过了一些东西，但在你的第一个 if 语句中，你有一个额外的“=”:

if(localStorage.getItem('tasks') === null) {
    let = tasks = []; // let tasks = []
    tasks.push(tasks);

我不确定任务变量的第一个定义。使用大括号，您可以创建键值对，但没有添加值。例如:

var person = { firstName: "John", lastName: "Doe" };

希望我能有所帮助。