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

Hamza Hajji
Hamza Hajji
11,931 Points

Weird Problem

I don't understand what's going on with my code and it's so frustrating When i uncheck the checkbox in the item from the completed it doesn't go to the incomplete items list and when i check the console it says this : Uncaught ReferenceError: IncompleteTasksHolder is not defined even though it is defined earlier in the code, so what could be the problem ? here's the code from my text editor:

// Problem: User Interaction doesn't provide desired results
// Solution: Add interactivity for users to manage daily tasks


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

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');  
  // button with class .edit
  var editButton = document.createElement('button');
  // button with class .delete
  var deleteButton = document.createElement('button');

  // Each element needs modifying

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

  return listItem;
};

// Add new task
var addTask = function () {
  // Create a new list item with the text from #new-task
  var listItem = createNewTaskElement('New Task');

  // append listItem to IncompleteTasksHolder
  incompleteTasksHolder.appendChild(listItem);

  bindTaskEvents(listItem, taskCompleted);
};

// Edit existing task
var editTask = function () {
  console.log('Editing Task ...');
  // When the Edit button is pressed
    // if the class of the parent is .editMode
      // Switch form .editMode
      // label text becomes the input's value
    // else
      // Switch to .editMode
      // input value becomes label's text

    // Toggle .editMode on the parent
};

// Delete task
var deleteTask = function () {
  console.log('Deleting Task ...');
  // When Delete is pressed
    // Remove the parent list item from the ul
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  ul.removeChild(listItem);
};

// Mark task as complete
var taskCompleted = function () {
  console.log('Task Comlete ...');
  // append the task list item to the #completed-tasks
  var listItem = this.parentNode;

  completedTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskIncomplete);
};


// Mark task as incomplete
var taskIncomplete = function () {
  console.log('Task Incomplete ...');
  // append the task list item to the #incomplete-tasks
  var listItem = this.parentNode;

  IncompleteTasksHolder.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 deletTask with delete button
  deleteButton.onclick = deleteTask;
  // bind checkboxEventHandler to the checkbox
  checkBox.onchange = checkboxEventHandler;
};

addButton.onclick = addTask;

// Cycle over incompleteTasksHolder ul list
for ( var i = 0; i < incompleteTasksHolder.children.length; i += 1 ) {
  // bindTaskEvents()
  bindTaskEvents(incompleteTasksHolder.children.item(i), taskCompleted);
}

// Cycle over completedTasksHolder ul list
for ( var i = 0; i < completedTasksHolder.children.length; i += 1 ) {
  // bindTaskEvents()
  bindTaskEvents(completedTasksHolder.children.item(i), taskIncomplete);
}

i've been trying to solve this for nearly an hour but it's so frustrating and i can't complete the rest of the videos like this

1 Answer

Benjamin Barslev Nielsen
Benjamin Barslev Nielsen
18,958 Points
IncompleteTasksHolder

should be

incompleteTasksHolder

inside your taskIncomplete function.

Hamza Hajji
Hamza Hajji
11,931 Points

thank you, i couldn't see it almost lost my mind