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 trialWayne Smith
12,526 PointsI've gotten the addItem step to work but I can't get the checkboxes to have any function or the delete to function
Checking and unchecking the boxes does nothing. Clicking the delete button does nothing. I've copied the code from the video
Wayne Smith
12,526 PointsThis is my code
var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTaskHolder = document.getElementById("incomplete-tasks");
var completedTaskHolder = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var editInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
//Add Tasks
var addTask = function () {
var listItem = createNewTaskElement("Some New Task");
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
//Complete Tasks
var taskCompleted = function() {
//When checkbox is check, append to completed tasks
var listItem = this.partNode
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncompleted);
}
//Edit existing taks
//When the edit button is pressed switch between edit mode, carry in new value if necessary
var editTask = function() {
}
//Delete tasks
var deleteTask = function() {
console.log("Delete task");
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
}
var taskIncomplete = function() {
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]")
var editButton = taskListItem.querySelector("button.edit")
var deleteButton = taskListItem.querySelector("button.delete")
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
addButton.onclick = addTask;
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
for(var i = 0; i < completedTasksHolder.children.length; i++) {
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
1 Answer
Tim Wall
9,570 PointsIt looks like there are several places in the code that are typos. If you look at the variables you declared earlier in the page they do not match the objects you are referencing in the taskCompleted and taskIncomplete function.
var incompleteTaskHolder = document.getElementById("incomplete-tasks");
var completedTaskHolder = document.getElementById("completed-tasks");
//Complete Tasks
var taskCompleted = function() {
//When checkbox is check, append to completed tasks
var listItem = this.partNode // <---part?
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncompleted);
}
var taskIncomplete = function() {
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
Also check the loops as this code is not quite complete.
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
for(var i = 0; i < completedTasksHolder.children.length; i++) {
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
Estevan Montoya
Courses Plus Student 23,989 PointsEstevan Montoya
Courses Plus Student 23,989 PointsCan you please paste your code here?