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 Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Appending and Removing Elements

Wayne Smith
Wayne Smith
12,526 Points
Posted by Wayne Smith
Wayne Smith
12,526 Points

I'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
Wayne Smith
12,526 Points
Wayne Smith
Wayne Smith
12,526 Points

This 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
Tim Wall
9,570 Points
Tim Wall
Tim Wall
9,570 Points

It 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);
}