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: Creating Elements

line 80 error now. please help.. console error

//Problem user interaction doesnt provide desired results
//solution- add ineractivity so user can manage 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 completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks
//Add a new task
var addTask = function() {
  console.log("Add task...");
  //when button pressed
  //Create a new list item with text from #new-task
    //input checkbox
    //label
    //input text
    //button.edit
    //button.delete
    //each element needs to be modified and appended
}

//Edit an exsisting task
var editTask = function() {
  console.log("Edit task...");
  //when the edit button is pressed
    //if the class of the parent is .editmode
      //Switch from .editmode
      //label text becomes the input value
      //else
        //switch to .editmode
        //input value becomes label text

      //toggle .editmode
}

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

//Mark a task complete
var taskComplete = function() {
  console.log("Complete task...");
  //when the checkbox is checked
   // append the task list item from completed
}

//Mark task as incomplete
var taskIncomplete = function() {
  console.log("Incomplete task...");
  //when the checkbox is unchecked
    //append the task list item to the #incompleted-tasks
}

var bindTaksEvents = 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
  editButton.onclick = editTask;
    //bild deleteTaks to delete button
  deleteButton.onclick = deleteTask;
    //bind checkBoxEventHandler to check button
  checkBox.onchange = checkBoxEventHandler;
}
//Set the click handeler to the addTask function

addButton.onclick = addTask;

//cycle over incomplete tasks holdermul list items
for(var i = 0; i < incompleteTaskHolder.children.length; i++) {

    //bind events to list items children (taskComplete)
  bindTaksEvents(incompleteTaskHolder.children[i], taskComplete);
}

//cycle over completetasks holdermul list items
for(var i = 0; i < completedTaskHolder.children.length; i++){

    //bind events to list items children (taskInomplete)
  bindTaksEvents(completedTasksHolder.children[i], taskIncomplete);
}

1 Answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

Okay... In you opening var declarations:

  • incompleteTaskHolder (is singular)
  • completedTasksHolder (is plural)

This is not a problem until you mix that up when using the variables.

//cycle over completetasks holdermul list items for(var i = 0; i < completedTaskHolder.children.length; i++){

//bind events to list items children (taskInomplete)

bindTaksEvents(completedTasksHolder.children[i], taskIncomplete);

In your 'for' conditions, you use the singular (when it should be plural).

In your function call you do use the plural so that's fine. Just fix the one line to be for(var i = 0; i < completedTasksHolder.children.length; i++) {

and that should do it. :)