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

Suleyman Kolanci
PLUS
Suleyman Kolanci
Courses Plus Student 13,745 Points

Cannot set property 'onchange' of null

as i do everything what shown on the video i encounter the problem it says Cannot set propert 'onchange' of null for the checkbox please help

//Problem User interaction doent give desired results
//Solution: Add interactivity


var taskInput = document.getElementById("new-task");// New Task
var addButton= document.getElementsByTagName("button")[0];//First BUtton
var incompleteTaskHolder = document.getElementById("incomplete-tasks");//Δ°ncomplete-tasks
 var completedTasksHolder = document.getElementById("completed-tasks"); //complete task 

// Add a New task
  var addTask = function(){
  console.log("hskskdj") 
    //When the Button is pressed
      //Create a list item w tex from new text
       //input chechbox
       //Label
       //input (text)
       //Button Edit
       // Button delet
      // Each elements needs modified and appended
 }
// Edit an existing Task  
  var editTask = function(){
  //When edit Pressed
  //if the class of the parent is edit mode
    //switch from edit mode
    //Label text become the inputs value
     // Else
        //witch to editMode
        //input value becomes labels text

      //Toggle editmode on parent
  }
// Delete existing task
  var deleteTask= function(){
  //When the button is presed 
    // Remove the parent list item from ul
}

// mark a tesk as complete
  var taskCompleted = function(){
    console.log("1")
  //when the checkbox is checked 
    // Append list item to the completed task
  }

// mark a task incomplete
   var taskIncomplete = function(){
         console.log("2")
  //when the checkbox is not checked 
    // Append list item to the incompletecompleted task
   }


//Set the click Handler to add task Function
addButton.onclick = addTask;   


var bindTaskEvents= function(taskListItem, checkboxEventHandler){
console.log("bb");

  //Select the childeren of li
  var checkBox = taskListItem.querySelector("input[type=checbox]");
  var editButton =  taskListItem.querySelector("button.edit");
  var deleteButton=  taskListItem.querySelector("button.delete");
  //bind edit task
  editButton.onclick = editTask;
  //bind delete
  deleteButton.onclick =deleteTask;
  //bind checbox event
 checkBox.onchange= checkboxEventHandler;
}
   //cycleover incomplletecomplete tak ul 
    for(var i=0; i < incompleteTaskHolder.children.length; i++) {
// bind events to list items children( taskCompleted)
bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
    }


  //cycleover complletecomplete tak ul 
      for(var i=0; i < completedTasksHolder.children.length; i++) {
// bind events to list items children( taskCompleted)
bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
    }

This is where i got stuck . Thank you for your prompt respond

3 Answers

Hugo Paz
Hugo Paz
15,622 Points

taskListItem.querySelector("input[type=checbox]");

You have this line misspelled, should be taskListItem.querySelector("input[type=checkbox]");

It may be a browser specific issue, but my checkboxes would not respond until I placed the input type in its own set of quotes. It's always good to remember that either single or double quotation marks are acceptable, just be sure to alternate types if you need to use quotation marks twice in the same expression.

Just in case anyone else has a similar issue:

    var checkBox = taskListItem.querySelector('input[type="checkbox"]');
Suleyman Kolanci
PLUS
Suleyman Kolanci
Courses Plus Student 13,745 Points

Thank you very much for time always need a second set of eyes!!!!