Как устранить ошибку в To Do List Web App

Question

В настоящее время экспериментируем с JavaScript и создаем веб-приложение списка дел. Имея некоторые проблемы с этим. Когда я обновляю sh страницу, она выдает ошибку:

TypeError: tasks is null

И когда я нажимаю кнопку отправки, она выдает ошибку:

TypeError: cyclic object value

Я пробовал ее после прочтения учебника онлайн по JavaScript, а затем у меня появилась идея реализовать его с помощью какого-то базового c проекта, подобного этому. Как я могу устранить ошибки? Кажется, я не могу найти решение.

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"};

Надеюсь, я помог.