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 trialDorothy Daniel
12,723 PointsI am getting a Uncaught TypeError for: var checkBox = taskListItem.querySelector("input[type=checkbox]");
I saw there was a solution is this very same problem, but it does not work for this situation. My code is below.
//Problem: User interaction does not provide the desired results.
//Solution: Add interactivity so the user can manage daily tasks.
var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks");
//Add a new task.
var addTask = function() {
console.log("Add tasks...");
//When the button is pressed:
//Create a new list item with the text from #new-task
//Input (checkbox)
//Label
//Input (text)
//Button.edit.
//Button.delete.
//Each elemts will need to be modified and appended.
}
//Edit an existing task.
var editTask = function() {
console.log("Edit tasks...");
//When the edit button is pressed:
//If the class of the parentis .editMode
//Switch from .editMode
//Label text become the input's value.
//else
//Switch to .editMode.
//input value becomes the label's text.
//Toggle .editMode on the parent.
}
//Delete an existing task.
var deleteTask = function() {
console.log("Delete tasks...");
//When the delete button is pressed:
//Remove the parent list item from the ul.
}
//Mark a task as complete.
var taskCompleted = function() {
console.log("Tasks complete...");
//When the checkbox is checked:
//Append the task list item to the #completed-tasks.
}
//Mark a task as incomplete.
var taskIncomplete = function() {
console.log("Task incomplete ...");
//When the checkbox is unchecked
//Append the task list item to the #incomplete-tasks.
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
console.log("Bind list item events");
//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 deleteTask to delete button.
deleteButton.onclick = deleteTask;
//Bind checkBoxEventHandler to the check box.
checkBox.onchange = checkBoxEventHandler;
}
//Set the click handler to the addTask function
addButton.onclick = addTask;
//Cycle over incompleteTasksHolder ul list items
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
//Bind events to list item's children (taskCompleted).
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}
//Cycle over completeTasksHolder ul list items
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
//Bind events to list item's children (taskIncompleted).
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
4 Answers
Hashim Zakiullah
1,373 PointsHi Dorothy,
Check the last two lines of your code, both of them should have: completedTasksHolder.children.length
You probably forgot to match them when you copied the code from above.
Gavin Eyquem
Front End Web Development Techdegree Student 20,443 PointsHi Hashim, I've read your comment and applied the changes but nothing has happened, can you assist me with this?
Alexander Kallaway (Emelianov)
10,307 PointsI've made the exact same mistake that Hashim had mentioned. Be careful, everyone! :)
Janice Childers
18,958 PointsI'm having the same issue. Was this ever resolved??
Dorothy Daniel
12,723 PointsNo Janice, this was never solved. I still have the problem. Not sure how to solve it.
Ian McAbee
6,448 PointsHello Dorothy,
Instead of:
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted)
}
The last chunk of code should read as:
for(var i = 0; i < completedTasksHolder.children.length; i++) {
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
...the dangers of copying and pasting. I had the same issue.
Dorothy Daniel
12,723 PointsDorothy Daniel
12,723 PointsWhile the answer that Hashim provided fixed a problem that I did not know I had (thank you Hashim), his answer does not correct the "Uncaught TypeError" problem I received from the Console.