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 trialAlex Lowe
15,147 PointsEdit Button deletes contents of Todo list item
This works for the most part, but when I press the edit button, the contents of the todo list item goes blank. This will happen when I press the edit button next to "Pay Bills," but not when I press the button next to "Go Shopping," which starts out in edit mode. Which makes me think I'm doing something wrong with the toggle.
Here's my javaScript:
var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incTaskHolder = document.getElementById("incomplete-tasks");
var compTaskHolder = document.getElementById("completed-tasks");
//New Task List Item
var createNewTaskElement = function(taskString){
var listItem = document.createElement("li");
//input (checkbox)
var checkBox = document.createElement("input"); //checkbox
//label
var label = document.createElement("label");
//input(text)
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
//Each element needs modifying
checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
//Each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem
}
//Add a new task
var addTask = function(){
console.log("Add task...");
//when button is pressed,
//create a new list item with the text from #newtask
var listItem = createNewTaskElement(taskInput.value);
//append li to inctaskholder
incTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComp);
}
//Edit an existing task
var editTask = function(){
console.log("Edit task...");
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
//if the class pf parent is .editmode
if (containsClass){
//label text become the input's value
label.innerText = editInput.value;
} else {
//switch to .editmode
//input value becomes the label's text
editInput.vaule = label.innerText;
}
listItem.classList.toggle("editMode"); //toggle .editmode on the parent
}
//Delete an existing task
var deleteTask = function(){
console.log("Delete task...");
//remove parent list item from the ul
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
}
//mark a task as complete
var taskComp = function(){
console.log("Completed task...");
//when the checkbox is checked
//append the task list itm to the #completedtasks
var listItem = this.parentNode;
compTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskInc);
}
//mark a task as incomplete
var taskInc = function(){
console.log("incompleted task...");
//when the checkbox is unchecked
//append the task list itm to the #incompletedtasks
var listItem = this.parentNode;
incTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskComp);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
console.log("bind list item events...");
//select li's children
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//bind edittask to edit button
editButton.onclick = editTask;
//bind deltask to del button
deleteButton.onclick = deleteTask;
//bind CBEH to check box
checkBox.onchange = checkBoxEventHandler;
}
//Set the click-handler to the addTask function
addButton.onclick = addTask;
//cycle over inctaskholder ul ils
for(var i = 0; i < incTaskHolder.children.length; i++){
//bind events to list item's children
bindTaskEvents(incTaskHolder.children[i], taskComp);
}
//cycle over comptaskholder ul ils
for(var i = 0; i < compTaskHolder.children.length; i++){
//bind events to list item's children
bindTaskEvents(compTaskHolder.children[i], taskInc);
}
And here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<p>
<label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
</p>
<h3>Todo</h3>
<ul id="incomplete-tasks">
<li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
<li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
<li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
</ul>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
2 Answers
Riley Hilliard
Courses Plus Student 17,771 PointsI think you just spelled 'value' wrong. It should be:
//switch to .editmode
//input value becomes the label's text
editInput.value = label.innerText; // <-- error was here. it was set to 'editInput.vaule'
Alex Lowe
15,147 PointsSo I did. Thank you.