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 trialLance Crow
8,037 PointsCheckbox and buttons do not work on newly added tasks
After completing this video, and modifying the code per Andrew's lesson, my To Do App only works PARTIALLY.
1) I can enter text in the text input, click the Add button, and the new task item appears in the proper list. The new task appears with the proper checkbox input, Edit and Delete buttons.
2) All the example task items - the ones the app STARTED WITH - can be checked or unchecked to move them back and forth between the incomplete and completed lists. They can also be removed with the Delete button.
3) However, my NEWLY CREATED TASKS do not move to the completed list when I check the checkbox. And they do not disappear when I click the Delete button.
As far as I can tell, I have written my code exactly as presented in the videos, and everything has worked up to this point. Seems like I must have accidentally broken my code somewhere, but I have no idea where or how. Any ideas?
(If it's relevant, I'm working on a MacBook, my browser is Safari, and I am writing my code with Sublime Text 2.)
Thanks, Lance
7 Answers
Michalis Efstathiou
11,180 Pointsif you do not provide your code, telling you where you went wrong is a shot in the dark
add your code here by enclosing it 3 back ticks like so
if I would have to guess, you dont bind the events for the newly created tasks correctly. I had a similar problem when i did mine so thats how i know :P
Michalis Efstathiou
11,180 Pointsno problem, glad I could help
Michalis Efstathiou
11,180 Pointslance, you dont seem to be calling the bindTaskEvents method inside your addTask method
which means that your checkbox and buttons are not binded with the event handlers
Lance Crow
8,037 PointsNot sure what you mean by "3 back ticks," but here is the code I created for this lesson. (Sorry, I can't figure out how to make it display properly. It works on some lines but not others.)
//Each element must be modified.
checkBox.type = "checkbox";
editInput.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
label.innerText = taskString;
Here is the code from previous lessons that deals with adding new tasks:
//ADD NEW TASK var addTask = function() { console.log("Add task..."); //Create a new list item with the text from #new-task: var listItem = createNewTaskElement(taskInput.value);
//Append listItem to incompleteTasksHolder.
incompleteTasksHolder.appendChild(listItem);
}
Here is the stuff related to deleting tasks:
//DELETE EXISTING TASK var deleteTask = function() { console.log("Delete task..."); var listItem = this.parentNode; var ul = listItem.parentNode;
//Remove parent list item from the ul.
ul.removeChild(listItem);
}
Here is the code that deals with binding to the completed and incomplete lists:
//MARK TASK AS COMPLETE
var taskCompleted = function() {
console.log("Task complete...");
//Append task list item to #completed-tasks.
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
//MARK TASK AS INCOMPLETE
var taskIncomplete = function() {
console.log("Task incomplete...");
//Append task list item to #incomplete-tasks.
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { console.log("Bind list item events"); //Select taskListItem'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 deleteTask to delete button.
deleteButton.onclick = deleteTask;
//Bind checkBoxEventHandler to checkbox.
checkBox.onchange = checkBoxEventHandler;
}
Michalis Efstathiou
11,180 Pointssorry your code is difficult to read, take a look at the markdown cheatsheet bellow
basically you need to put your code inside back ticks
so you'd get
<script>
function() {
example;
}
</script>
Sal M.
3,906 PointsHaving the same issue and just can't figure it out. Any help would be much appreciated!
'''javascript
////Problem: User interaction doesn't provide desire results //Solution: Add interactivity so the user can manage daily tasks
var taskInput = document.getElementById("new-task"); //new-task var addButton = document.getElementsByTagName("button")[0]; //first button var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks
//New Task list Item var createNewTaskElement = function(taskString) { //Create List Item 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"); // text //button.edit var editButton = document.createElement("button"); //button.delete var deleteButton = document.createElement("delete");
//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..."); //Create a new list item with the text from #new-task: var listItem = createNewTaskElement(taskInput.value); //Append listItem to incompleteTasksHolder incompleteTasksHolder.appendChild(listItem); bindtaskEvents(listItem, taskCompleted); }
//Edit an existing task var editTask = function() { console.log("Edit task..."); //When the edit button is pressed //If the class of the parent is .editMode //Switch from .editMode //label text because the input's value //else //Sitch to .editMode //Input value becomes the label's text
//Toddle.editMode on the parent
}
//Delete an exisiting task var deleteTask = function() { console.log("Delete task..."); var listItem = this.parentNode; var ul = listItem.parentNode;
//Remove the parent list item from the ul ul.removeChild(listItem); }
//Mark a task as complete var taskCompleted = function(){ console.log("Task compelte..."); //Append the task list item to the #completed-tasks var listItem = this.parentNode completedTasksHolder.appendChild(listItem); bindtaskEvents(listItem, taskIncomplete); }
//Mark a task as incomplete var taskIncomplete = function() { console.log("Task incomplete..."); //Append the task list item to the #incomplet-tasks var listItem = this.parentNode incompletedTasksHolder.appendChild(listItem); bindtaskEvents(listItem, taskCompleted); }
var bindtaskEvents = function(taskListItem, checkboxEventHandler) {
console.log("Bind list item events");
//select taskListItem'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 deleteTask to delete button
deleteButton.onclick = deleteTask;
//bind checkBoxEventHandler to checkbox
checkBox.onchange = checkboxEventHandler;
}
//Set the click handler to the addTask function addButton.onclick = addTask;
//cycle over incompleteTasksHolder ul list items for(var i = 0; i < incompleteTasksHolder.children.length; i++) { //bind each events to list item's children (taskCompleted) bindtaskEvents(incompleteTasksHolder.children[i], taskCompleted); }
//cycle over completeTasksHolder ul list items
for(var i = 0; i < completedTasksHolder.children.length; i++) {
//bind each events to list item's children (taskIncomplete)
bindtaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
'''
Lance Crow
8,037 PointsOkay, I suspected it was something to do with the binding, but I couldn't figure it out beyond that. I added the bindTaskEvents to the addTask function, and it seems to work now. I must have missed writing that in the code somehow in the original lesson.
Thanks so much, Michalis.
Marcus Parsons
15,719 PointsJust for future reference Lance, when you post code on the forum, you use the backtick button (generally on the same key as the ~ on your keyboard). And you use 3 of those. But, when you post your code, be sure to leave an empty line above and below the code block and that nothing is on the same line as the 3 backticks unless you are specifying the language you are posting such as html/css/javascript/ruby/etc. like so:
'''javascript
//PASTE CODE HERE
'''
Notice how there are extra lines above and below the code block? Now, when that renders, it will look this:
//paste code here
I hope that helps!