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

Kota Fukada
Kota Fukada
16,243 Points

function(taskListItem, checkBoxEventHandler) How come "taskListItem" and "checkBoxEventHandler" work?

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 checkbox
  checkBox.onchange = checkBoxEventHandler;
}

I thought "taskListItem" and "checkBoxEventHandler" are just name of function. Why they have some elements? Because they are used as "taskListItem.querySelector();" and "checkBox.onchange = checkBoxEventHandler".

I know I don't understand how "function()" work. I only know "taskListItem" and "checkBoxEventHandler" are param.

hay kota ,check out below code which help u to understand how function working

function completedTasks(){
//here function completed tasks
}

function incompletedTasks(){
  //here is function incompleted tasks
}
/*function is callled from looping at the end of code*/  
function setEvent(liItems,checkboxHandler){
 //assigning buttons (edit,delete) or checkbox to variable 
    var edit_btn = liItems.querySelector("button.edit");
    var delete_btn = liItems.querySelector("button.delete");
    var checkbox = liItems.querySelector("input[type=checkbox]");

  //making it work
    edit_btn.onclick = editTask;  //when it is clicked editTask function will execute
    delete_btn.onclick = deleteTask; //when it is clicked deleteTask function will execute
    checkbox.onchange = checkboxHandler; /*and when you make any type of changes i.e. uncheck or check in     
                                                                            checkbox the checkboxHandler(i.e. completedTasks or incompleted    
                                                                            task) function will be executed */  

}
//here we're accessing all the items or elements inside incompleted tasks list
for(var i=0;i<tasksLeft.children.length;i++){
      //looping through each item of our taskcompleted section
      setEvent(tasksLeft.children[i],completedTasks);
/* calling a function setEvent which is in your case bindTaskEvents and passing two values (argument)to it first is incompleted tasks[i] item and second is function completed task */
  }
  for(var i=0;i<tasksComplete.children.length;i++){
      //looping through each item of our taskcompleted section
      setEvent(tasksComplete.children[i],incompletedTasks);
/* calling a function setEvent which is in your case bindTaskEvents and passing two values (argument)to it first is completed tasks[i] item and second is function named incompleted task */
  }

i think this help you to understand how function working

thanx

1 Answer

Steven Parker
Steven Parker
231,198 Points

In JavaScript, functions are "first class" objects. This means that they can be handled like any variable.

So function names can be supplied as event handlers, called with parameters, or be passed as parameters. You were right on both counts. The concepts are not contradictory.

On the other hand, "function(param1, param2)" is known as an "anonymous function". It cannot be called directly because it has no name, but it still can be passed as a parameter, and take its own parameters. In fact, anonymous functions are normally used only when they are passed as parameters and not needed anywhere else.

Kota Fukada
Kota Fukada
16,243 Points

thank you Then could you explain me when "taskListItem" used as var checkBox = taskListItem.querySelector("input[type=checkbox]");

as a example, how "taskListItem" works??