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 trialHamza Hajji
11,931 PointsWeird 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
18,958 PointsIncompleteTasksHolder
should be
incompleteTasksHolder
inside your taskIncomplete function.
Hamza Hajji
11,931 PointsHamza Hajji
11,931 Pointsthank you, i couldn't see it almost lost my mind