Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Having problems with localStorage in toDo list

Hi!

I got my simple todo list working but I have problems with retrieving data from local storage. I tried different ways but still gives me an error.

Can someone help?

//Declaring variables
var taskInput = document.getElementById("new-task"); //Text input
var addButton = document.getElementById("add"); //Add button
var list = document.getElementById("todo-list"); //ToDo list
var listItem = document.getElementsByTagName("li"); //List item

//New task list item
var createTaskElement = function(taskString) {
  // creating the list item
  var listItem = document.createElement('li');
  // creating the label
  var label = document.createElement('label');
  //creating the delete button
  var deleteButton = document.createElement('button');
  // modifying elements
  label.innerText = taskString;
  deleteButton.innerText = "Delete"; 
  deleteButton.className = "delete";
  deleteButton.onclick = deleteTask;
  //appending the label and the deleteButton to listItem
  listItem.appendChild(label);
  listItem.appendChild(deleteButton);
  return listItem;  
};

//Add a new task
var addTask = function () {
  var listItem = createTaskElement(taskInput.value);
  list.appendChild(listItem);
  taskInput.focus();
  taskInput.select();
  saveToDoList();

};

//Delete a task
var deleteTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);  
  saveToDoList();

};

var bindTaskEvents = function(taskListItem) {
  //select taskListItem's children
  var deleteButton = document.querySelector("button.delete"); //Delete button
  //bind tasks to delete button
  deleteButton.onclick = deleteTask;
};

//cycling over the list ul list items
  for(var i = 0; i < list.children.length; i++) {
   //bind events to list item's children
    bindTaskEvents(list.children[i])
  //
};

//Set the click handler to the addTask function
addButton.onclick = addTask;


//Save data to the local storage
function saveToDoList() {
  var item = JSON.stringify(listItem);
  localStorage.setItem("todoList", item)

}

//Get data from local storage
function getToDoList() {
  var item = localStorage.getItem("todoList")
  list = JSON.parse(item);

}

saveToDoList();
getToDoList();
<!DOCTYPE html>
<html>
  <head>
    <title>ToDo App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
  <div class="container">
    <div id="head"> 
      <h1>ToDo List</h1>
    </div>
    <div id="list">
    <ul id="todo-list" >
      <li><label>Eat bananas</label> <button class="delete">Delete</button></li>
    </ul>
    </div>
    <div id="add-tasks">
      <input id="new-task" type="text"><button id="add">Add</button>
    </div>
  </div>
    <script src="js/app.js"></script>

  </body>


</html>

Thanks in advance!