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 trialArnold Sanglepp
12,168 PointsHaving 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!