How to resolve an error in To Do List Web App

Question

Currently experimenting with JavaScript and building a To-Do List Web App. Having some issues with it. When I refresh the page, it gives the error:

TypeError: tasks is null

And when I press the submit button, it gives the error:

TypeError: cyclic object value

I was trying it out after reading a tutorial online on JavaScript and then I got the idea on implementing it with some basic project like this one. How can I resolve the errors? I can't seem to figure out the solution.

JS Code:

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 +=
    `
        
            
                
                    ${title}
                
                
                    ${description}
                
                
                    X             
                
            
        
    `;
}
}

getTasks();

HTML code:


    
        My To-Do List
    



    
        
            
                
                    
                        
                            
                        
                        
                            
                        
                        
                    
                

            
        

        
            
                
                    Title
                
                
                    Description
                
                
                    Delete

Cortoloman · Accepted Answer

I am still learning javascript so I might have missed something, but in your first if statement, you have an extra "=":

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

and I am not sure about that first definition of the task variable. With curly braces, you make key-value pairs, but you didn't add the value. For example:

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

Hope I helped.

How to resolve an error in To Do List Web App

Answers (1)

Related Questions