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

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

taskListItem as an element.

I'm not quite sure about the following piece of code in the bindTaskEvents function:

var checkBox = taskListItem.querySelector ('input[type=checkbox]');

In particular, what I don't understand is the taskListItem part. The syntax requires that it be an element, but as far as I can see, all it is is a parameter in the function. As seen in the

var bindTaskEvents = function(tasklListItem, checkBoxEventHandler) piece of code.

I'm not understanding how taskListItem has gone from being a placeholder parameter to an actual element that can be used in querySelector method.

Thanks to anyone who can help out here.

2 Answers

Christopher Aporta
Christopher Aporta
24,258 Points

Hey Gabriel,

Since the argument we will be passing to the taskListItem parameter is a JavaScript variable that holds an HTML element, taskListItem essentially acts as a "placeholder" for any given element.

For instance, our variable taskInput holds the HTML <input> element with the ID of #new-task:

var taskInput = document.getElementById("new-task");

if we then pass taskInput as our argument for the taskListItem parameter:

var checkBox = taskListItem.querySelector ();

//becomes...

var checkBox = taskInput.querySelector ();

once the function is called. Hope this helps!

-Chris

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Chris,

I was looking over this question again, and I was wondering if I'm understanding it correctly, upon coming back to it.

Am I correct in thinking that if we passed taskInput as our argument for the taskListItem parameter then the code would look like this

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  //select taskListItem's children
  var checkBox = taskInput.querySelector("input[type=checkbox]");
}

or do we need to change

var bindTaskEvents = function(taskListItem, checkBoxEventHandler)

to

var bindTaskEvents = function(taskInput, checkBoxEventHandler)

?

Thanks!

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Hi Gabriel,

I had the very same question, and I think I found the answer from a similar question asked in the previous video. Here's my understanding:

This code sets up a function with two parameters:

var bindTaskEvents = function(tasklListItem, checkBoxEventHandler)

The parameters being: tasklListItem checkBoxEventHandler

These are like variables that will be used within the function.

The values that go into these functions are then called from another bit of code where the for loop is used. Here's one of the loops:

for (var i = 0; i < incompleteTasksHolder.children.length; i++) bindTasksEvents(incompleteTasksHolder.children[i], taskCompleted);

I'm going to assume you understand how the loop works but basically it's running through the list items (li) within the unordered list (ul). This loop is going through the incomplete-task unordered list.

The 2nd line of the code is calling the binkTasksEvents function, as set up in the var bindTaskEvents above, and passing the two arguments into the function.

In the case above, the loop goes through the incomplete unordered list and picks out each list item (1st argument) - in this case there are 2 list items (pay bills and go shopping) and brings each list item into the function, so that it can perform the remaining code within the function.

The second argument value: taskCompleted goes into the 2nd parameter: checkBoxEventHandler. Now, this part I'm not exactly sure about but the taskCompleted is a variable set up at the top of the program that holds a function which at this point in the course has no code.

I hope this makes sense?