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 trialSuleyman Kolanci
Courses Plus Student 13,745 PointsCannot 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
15,622 PointstaskListItem.querySelector("input[type=checbox]");
You have this line misspelled, should be taskListItem.querySelector("input[type=checkbox]");
Thomas A. 'Andy' Wager
17,980 PointsIt 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
Courses Plus Student 13,745 PointsThank you very much for time always need a second set of eyes!!!!