如何解决待办事项列表 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();

Answer 1

我仍在学习 javascript，所以我可能错过了一些东西，但在你的第一个 if 语句中，你有一个额外的“=”：if(localStorage.getItem('tasks')&nbsp;===&nbsp;null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;=&nbsp;tasks&nbsp;=&nbsp;[];&nbsp;//&nbsp;let&nbsp;tasks&nbsp;=&nbsp;[] &nbsp;&nbsp;&nbsp;&nbsp;tasks.push(tasks);我不确定任务变量的第一个定义。使用大括号，您可以创建键值对，但没有添加值。例如：var person = { 名字：“约翰”，姓氏：“多伊” };希望我有所帮助。