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

Floyd Orr
Floyd Orr
11,723 Points

Any idea why my add item button does not add anything to list?

I have been trying to find why the add button won't add anything. It has an event handler attached according to console.log . I have been at it for 4 hours. I don't see whats wrong. Please help. Thank you.

//Problem user interaction do not provide  results
// add interactivity so user can manage daily task

var taskInput = document.getElementById("new-task");//new-task
var addbutton = document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder = document.getElementById("incomplete-tasks");//incomplet-task
var completedTaskHolder = document.getElementById("completed-tasks");//completed-task

//new task list item
var createNewTaskElement = function(taskString){
  //create List Item
 var listItem = document.createElement("li"); 

  //input (checkbox)
  var checkBox = document.createElement("input");//input checkbox
  var label = document.createElement("label");// text

  // input (text)
  var editInput = document.createElement("input");//text
  //button.edit

  var editButton = document.createElement("button");
  //button.delete
var deleteButton = document.createElement("button");
  //Each elements, needs modifying

  //each element needs appending
  listItem.appendChild(checkBox);
  listItem.appendChild(label);
   listItem.appendChild(editInput);
   listItem.appendChild(editButton);
   listItem.appendChild(deleteButton);

  //edit an existing task
  return listItem

}



//add a new task
var addTask = function() {
  console.log("add to Task works...");
//creat a new list item with the text from #new-task:
 var listItem = createNewTaskElement("Some New Task"); 
  //append listItem incompleteTaskholder
  incompleteTaskHolder.appendChild(listItem);

}



//Edit an existing task
var editTask = function() {
  console.log("edit task....");
  //when the edit button is pressed
  // if the class of the parend is editmode
  //switch from .editMode
  //label text bcome teh inpu valu
//else
  //seitch to editMode
  //input value becomes the labels text

//Toggle editMode on the parent

//delete an existing task

}
var deleteTask = function() {
  console.log("delete task");
  //when delete button is pressed
    //remove parrent item from ul

//mark a task as complete
}
var taskCompleted = function () {
  console.log(" taskCompleted");
     //when the checkbox is checked
     //append the task list item to the completed=tasks
     //mark a task as incomplete
     //when the checkbox is unchecked

}

var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
    //select it'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
   //bind deleteTask to the delete button
   //bind checkBoxEventHandler to checkbox
  checkBox.onchange = checkBoxEventHandler;

}

//set event handler to addTask Function

addbutton.onclick = addTask;

//cycle over incompleteTaskHolder ul list item when checked ad to other list

   for (var i = 0; i < incompleteTaskHolder.children.length; i++) {  
//bind events to list items children (taskcompleted)
  bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);    
     }

//cycle over completedTaskHolder ul list items

   for (var i = 0; i < completeTaskHolder.children.length; i++) {  
//bind events to list items children (taskcomplete)
  bindTaskEvents(completeTaskHolder.children[i], taskIncomplete);    
     }

1 Answer

Hey Floyd,

You still have a ways to go with the program. You should first go back through the video as you are missing some things in your code. And after you've added in everything, keep following along with the instructor because the code is incomplete even after you've added in what you're missing.