Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Modifying Elements

Doesn't delete item when manually added

When I manually add new item through add button and then check a checkbox - my new item doesn't delete itself from to do list. Please help - thanks!

//Problem: User interaction doesn't provide desired results
//Solution: Add the interactivity so the user can solve daily tasks

var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //First button
var incompleteTaskHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTaskHolder = 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("button");

    //Each element needs modifying
    checkBox.type = "checkBox";
    editInput.type = "text";

    editButton.innerText = "Edit";
    editButton.className = "Edit";
    deleteButton.innerText = "Delete";
    deleteButton.className = "Delete";

    label.textContent = 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() {
  //When the button is pressed

  //Create a new list item with the text from #new-task:
  var listItem = createNewTaskElement(taskInput.value);

  //Append listItem to incompleteTaskHolder
  incompleteTaskHolder.appendChild(listItem);
};

//Edit an existing task
var editTask = function() {
  //When the edit button is pressed
    //if the class of the parent is .editMode
      //Switch from .editMode
      //Label text become the input's value
    //else
      //Switch to .editMode
      //Input value becomes the label's text

    //Toglle .editMode on the parent
};

//Delete an exisitng task
var deleteTask = function() {
  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() {
  //Append the task list item to the #completed-task
  var listItem = this.parentNode;
  completedTaskHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
};

//Mark a tast as incomplete
var taskIncomplete = function() {
  //Append the task list item to the #incomplete-task
  var listItem = this.parentNode;
  incompleteTaskHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
};

var bindTaskEvents = function(taskListItem, checkBoxEventHandler){
//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 dellete button
  deleteButton.onclick = deleteTask;

  //bind checkBoxEventHandler to checkbox
  checkBox.onchange = checkBoxEventHandler;
}; 

//Set the click handler to the addTask function
addButton.onclick = addTask;

//Cycle over incompleteTaskHolder ul list items
for (var i = 0; i < incompleteTaskHolder.children.length; i++){
  //bind events to list item's children (taskCompleted) 
  bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
};

//Cycle over completedTaskHolder ul list items
for (var i = 0; i < completedTaskHolder.children.length; i++){
  //bind events to list item's children (taskIncomplete) 
  bindTaskEvents(completedTaskHolder.children[i], taskIncomplete);
}

2 Answers

Chris Shearon
PLUS
Chris Shearon
Courses Plus Student 14,369 Points

First thing I notice is there isn't a call to the bindTaskEvents in the addTask function.

var addTask = function() {
     var listItem = createNewTaskElement(taskInput.value);
    incompleteTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted); //Add this line.. which will bind the click handlers...
    taskInput.value = ""; //And this line ..which will clear the input field ...to your addTask function and try it again.
};

Still doesn't work :/

I ran into the same problem. The issue is in this bit of code:

editButton.innerText = "Edit";

editButton.className = "Edit";

deleteButton.innerText = "Delete";

deleteButton.className = "Delete";

the .className's are case sensitive. The following will solve your problem.

editButton.innerText = "Edit";

editButton.className = "edit";

deleteButton.innerText = "Delete";

deleteButton.className = "delete";