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

Mendel Konikov
Mendel Konikov
5,602 Points

Marking items as complete works but not always vice versa

Code seems to work only partially - can't figure out what's wrong.

After checking box, LI does move to completed but after testing and toggling on and off it does not work anymore.

What am I missing?

TIA!

var taskInput = document.getElementById("new-task"); //new task
var addButton = document.getElementsByTagName("button")[0]; //firstbutton
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completeTasksHolder = document.getElementById("completed-tasks");




//Add new task
var createNewTaskElement = function(taskString) {
  //create LI
  var listItem = document.createElement("li");
    //input checkbox
  var checkbox = document.createElement("input");
    //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 full text and to be 

  //each element appended

  listItem.appendChild(checkbox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);


  return listItem;
}

var addTask = function() {
  console.log("Add");

  //Create new list item with text from #new-task
  var listItem = createNewTaskElement("Some New Task");

  //append LI to inclimpletetaskholder

  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskComplete);
}



//Edit exisiting task

var editTask = function() {
    console.log("Edit");
  //When edit button pressed
    //if parent class is .editMode
      //switch from .editmode
      //label become input value
    //else
      //switch to .editmode
      //input value become label

    //toggle .editMode on parent
}


//Delete existing task
var deleteTask = function() {
    console.log("Delete");
   //when delete pressed
    //remove parent li from ul
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);
}

//Mark tasks complete
var taskComplete = function() {
    console.log("Complete");
  //when checkbox is :checked
  //append task li to #completed-tasks ul
  var listItem = this.parentNode;
  completeTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskComplete);
}

//Mark tasks incomplete
var taskIncomplete = function() {
    console.log("Incomplete");
  //when checkbox unchecked
    //append to incomplete tasks
    var listItem = this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind LIs");
  //select children
  var checkBox = taskListItem.querySelector("input[type='checkbox']");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");
    //bind edit
  editButton.onclick = editTask;

    //bind delete
  deleteButton.onclick = deleteTask;

    //bind checkbox
  checkBox.onchange = checkBoxEventHandler;
}

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

//cycle over incomplete UL LI
for ( var i = 0; i < incompleteTasksHolder.children.length; i++ ) {
  bindTaskEvents(incompleteTasksHolder.children[i], taskComplete);

    //bind events
}


//cycle over complete UL LI
for ( var i = 0; i < completeTasksHolder.children.length; i++ ) {
  bindTaskEvents(completeTasksHolder.children[i], taskIncomplete);

    //bind events
}
Steven Parker
Steven Parker
231,236 Points

This is only part of the code for this project.

To share everything at once, make a snapshot of your workspace and post the link to it here.

2 Answers

Hi Mendel, If you haven't found an answer by now or if someone runs into the same problem here is what I noticed from the code you posted. Just looking at this section:

var taskComplete = function() {
    console.log("Complete");
  //when checkbox is :checked
  //append task li to #completed-tasks ul
  var listItem = this.parentNode;
  completeTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskComplete);
}

//Mark tasks incomplete
var taskIncomplete = function() {
    console.log("Incomplete");
  //when checkbox unchecked
    //append to incomplete tasks
    var listItem = this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete)

I noticed you made the taskIncomplete/taskComplete functions call themselves whereas you were supposed to make taskIncomplete call taskComplete and vice versa like below.

try changing your code to

var taskComplete = function() {
    console.log("Complete");
  //when checkbox is :checked
  //append task li to #completed-tasks ul
  var listItem = this.parentNode;
  completeTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);          //<<<------change here
}

//Mark tasks incomplete
var taskIncomplete = function() {
    console.log("Incomplete");
  //when checkbox unchecked
    //append to incomplete tasks
    var listItem = this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskComplete)           //<<<------change here