Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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!