"JavaScript Loops, Arrays and Objects" was retired on December 18, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed DOM Scripting By Example!
You have completed DOM Scripting By Example!
Preview
Let's allow users to mark off when guests respond that they intend to come to the party.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's create a check box to mark off
when a guest confirms they're coming
0:00
to the party.
0:04
When we create the list item,
in the submit handler,
0:05
this list item should not only
have the text but a check box too.
0:09
Now we've already created and appended
list items to the un-ordered list element,
0:12
so this will be similar, though it will
want to associate a label with a check box
0:17
so users will know what it's for So
0:22
first right under where we created
the list item and set it text content.
0:24
Let's create the label with const
label = document.createElement.
0:29
Label.
0:39
And we'll set its text to confirmed with
0:43
label.textContent equals Confirmed.
0:48
After that, let's create an input element
and store it in the variable check box.
0:53
We can then set the inputs
type to checkbox
1:11
with the checkbox.type equals checkbox.
1:16
Once we've created, and
configured the input.
1:23
We can append it to the label
with labeled dot append
1:25
child check box.
1:31
Then append the label to the list
element with li append child label.
1:36
Let's try this out on the browser.
1:45
We'll save the file.
1:46
Refresh and if we enter a name, let's say
Mary, we see that a check box appears.
1:48
Now we can check off when
we hear from Mary, great.
1:56
So now let's add a handler
to the check box.
2:00
When the check box is checked we'll add
a class of responded to the list item.
2:03
Now, there's already a style for
that class in the CSS
2:07
that changes the color of the text and
border when that class is added.
2:11
So let's first add the event
handler to add the class.
2:15
To add an event listener to any new list
item we could call admin listener on
2:18
each individual check box as we create
them inside this submit handler, but
2:24
we can also take advantage of event
bubbling, that's when an event on one
2:29
element bubbles up to its parent or
other ancestors.
2:32
So this means we can add
the handler to just one element,
2:35
the UL tag holding the list items and
check boxes.
2:39
This leads to better performance and
code that's easier to read and understand.
2:42
And while we could listen for a click
event on the check box to trigger our
2:46
event, there's a better event to use
with check boxes, the change event.
2:51
After all we're not really interested
in whether the box is clicked we're
2:55
interested in when the checkbox state
has changed from unchecked to checked or
2:59
from checked to unchecked.
3:03
So to call addEventListener on the ul
element we'll need to select it first But
3:05
looking inside the submit
handler we just wrote
3:10
notice that we've selected the U-L here.
3:14
Now if you remember how JavaScript
functions are scoped you know we can
3:17
access variables from outside the function
where they live so if I try to access
3:20
the U-L outside the function
UL.addEventlisterner.
3:25
It's going to be undefined.
3:32
On the other hand, variables declared
outside a function can be accessed inside.
3:34
That's how our submit handler can
access the input variable for
3:40
example, which has been declared
at the top of the file.
3:43
So if we simply move this declaration
of ul to the top of the file,
3:46
The submit handler will
still have access to it and
3:55
we can also access it here where we
want to set up our change handler.
3:58
So now let's move back to building
our change event handler.
4:04
I'll type change as a string for
the event type, And then create
4:09
the function by adding the parameter
e which will hold the event object.
4:14
And now let's find out whether
the check-box is checked or
4:23
not check boxes have an attribute
called checked that is true when
4:26
they are checked and
false when they are unchecked.
4:30
So let's just log that value
to the console right now and
4:33
we can access the checkbox from the event
object and its property target.
4:36
So will type consulate up log target
4:41
checked over in the browser,
4:46
if you open your consul window,
add a name to the list and
4:51
click on the box a few times,
you'll see the values in the console.
4:56
So we can use these values to set and
unset the class on our list items.
5:00
Moving back to app.js,
you can delete the console.log.
5:05
And now let's get a reference to the check
box itself here on the first line of
5:09
our change event handler
with const checkbox
5:14
equals event.target.
5:19
Once we have the value of the checkbox
which will be true if the box is checked
5:24
or false if it's not will stored
in a variable named checked.
5:28
Now since we'll change the class of the
list item, when the check box is checked.
5:40
We need a reference to the list item.
5:44
List item is the checkbox is grandparent
because the label is a child of list item
5:47
and the checkbox is
the child of the label.
5:51
So we can traverse to the list
item by calling parent node twice
5:55
that is parent node once to
traverse to the label element and
5:59
then parent node again to
traverse to the list item.
6:04
So I'll store that in
a variable named listitem.
6:07
Then we'll say
checkbox.parentNode.parentNode
6:14
Next we'll set the class name
of the list item to responded.
6:24
If check is true or
remove the class if check as false.
6:28
Now I just used the word if so
6:31
that's a good sign that the If
statement will come in handy.
6:33
So right below our constants
will add if and else blocks.
6:36
Now since checked is a boolean
6:48
we can just put it right here
in the parentheses by itself.
6:51
And we'll know that the first clause, or
6:55
branch, will run if checked as true and
the else branch will run if not.
6:56
So, we can use the class name property of
list item to set the class accordingly.
7:02
So, in the if branch, we'll say
listitem.className equals responded.
7:07
Then an else, we'll say listItem.className
equals an empty string.
7:16
All right, so let's try this out.
7:24
I'll save the file, I'll refresh the
browser then enter a name and hit enter.
7:25
And I'll add a couple more names just so
you can see how this works.
7:33
And now when I check and
7:39
uncheck the boxes,
you can see our styling is kicking in.
7:41
Cool.
7:44
So great.
You've just added a delegated handler
7:47
that marks guests off when they
responded to our users RSVPs So
7:50
now, what if we want to remove a name
from the list, how would we handle that?
7:55
Well, I'll show you in the next video.
7:59
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up