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: Traversing Elements with querySelector

Rachél Bazelais
Rachél Bazelais
10,583 Points

Mystery Uncaught TypeError: Cannot read property 'children' of null

I have no idea what's wrong. Can someone help me understand this error and why i'm getting it?

Here's my code:

    //Problem: User interaction doesn't provide desired results.
    //Solution: Add interactivity so the user can manage daily tasks.

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

    //add a new task
    var addTask = function(){
        console.log("Add Task...");
        //when a button is pressed create a new task
        //create a new list item with the text from #new-task:
            //create input with a checkbox
            //input (checkbox)
            //label
            //input (text)
            //button.edit
            //button.delete
            //Each element has to be modified and appended
    }

    //edit an existing task
    var editTask = function(){
        console.log("Edit Task...");
        //if the class of the parent is in .editMode
            //switch from .editMode
            //the label text becomes input's the value
        //else
            //switch to .editMode
            //the label value becomes label's the text
        //toggle .editMode on the parent
    }

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

    //mark a task as complete
    var taskCompleted = function(){
        console.log("Task Complete ...");
        //when 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 checkbox is unchecked
            //append the task list item to the #incompleted-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 the delete button
            deleteButton.onclick = deleteTask;

            //bind checkboxEventHandler to checkbox
            checkBox.onchange = checkBoxEventHandler;
    }


    //set the click handler to the add task function
    //call the function when the user interacts with the button
    addButton.onlick = addTask;

    //cycle over incompleteTaskHolder ul list item
    for (var i = 0; i < incompleteTasksHolder.children.length; i++){
        //bind events to list item's children (taskCompleted)
        bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
    }

    //cycle over completeTaskHolder ul list item
    for (var i = 0; i < CompletedTasksHolder.children.length; i++){
        //bind events to list item's children (taskIncomplete);
        bindTaskEvents(CompletedTasksHolder.children[i], taskIncomplete);
    }
Steven Parker
Steven Parker
231,271 Points

For code quoting, use accents/"backticks" (```), not apostrophes (''').

And add "js" to the top one (```js) to get syntax coloring.

1 Answer

Steven Parker
Steven Parker
231,271 Points

:point_right: You have a capitalization mismatch.

On the last few lines, you reference "CompletedTasksHolder" twice, but your variable name established at the top is "completedTasksHolder" (lower case "c").

Rachél Bazelais
Rachél Bazelais
10,583 Points

Thanks for reponding! I fixed the variable name but i'm still getting the same error. Specifically on line 79 but there's no syntax error

Snippet: Line 79: for (var i = 0; i < incompleteTasksHolder.children.length; i++){

    //set the click handler to the add task function
    //call the function when the user interacts with the button
    addButton.onlick = addTask;

    //cycle over incompleteTaskHolder ul list item
    for (var i = 0; i < incompleteTasksHolder.children.length; i++){
        //bind events to list item's children (taskCompleted)
        bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
    }

    //cycle over completeTaskHolder ul list item
    for (var i = 0; i < completedTasksHolder.children.length; i++){
        //bind events to list item's children (taskIncomplete);
        bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
    }

Whole code block below

    //Problem: User interaction doesn't provide desired results.
    //Solution: Add interactivity so the user can manage daily tasks.

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

    //add a new task
    var addTask = function(){
        console.log("Add Task...");
        //when a button is pressed create a new task
        //create a new list item with the text from #new-task:
            //create input with a checkbox
            //input (checkbox)
            //label
            //input (text)
            //button.edit
            //button.delete
            //Each element has to be modified and appended
    }

    //edit an existing task
    var editTask = function(){
        console.log("Edit Task...");
        //if the class of the parent is in .editMode
            //switch from .editMode
            //the label text becomes input's the value
        //else
            //switch to .editMode
            //the label value becomes label's the text
        //toggle .editMode on the parent
    }

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

    //mark a task as complete
    var taskCompleted = function(){
        console.log("Task Complete ...");
        //when 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 checkbox is unchecked
            //append the task list item to the #incompleted-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 the delete button
            deleteButton.onclick = deleteTask;

            //bind checkboxEventHandler to checkbox
            checkBox.onchange = checkBoxEventHandler;
    }


    //set the click handler to the add task function
    //call the function when the user interacts with the button
    addButton.onlick = addTask;

    //cycle over incompleteTaskHolder ul list item
    for (var i = 0; i < incompleteTasksHolder.children.length; i++){
        //bind events to list item's children (taskCompleted)
        bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
    }

    //cycle over completeTaskHolder ul list item
    for (var i = 0; i < completedTasksHolder.children.length; i++){
        //bind events to list item's children (taskIncomplete);
        bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
    }
Rachél Bazelais
Rachél Bazelais
10,583 Points

I got it! I had the id string wong