Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Let's plan how we're going to let users edit names on the list.
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
[MUSIC]
0:00
Our RSVP application has begun to take
shape, but it's missing one key feature.
0:04
Say a user added Joan to the RSVP list,
but meant to type John.
0:10
They'll need a way to edit
the names they've added.
0:15
Before we dive in and create this feature,
let's think about how to accomplish this.
0:18
Pretend you're a user for a moment.
0:22
What would you look for
to know you could edit this name?
0:25
I for instance might look for
a button next to it that says Edit.
0:28
Clicking the button,
maybe the name becomes a form field or
0:32
I can edit the name.
0:34
When I'm done editing the name,
I will look for a Save button to click.
0:36
And clicking this button would bring
the app back to the initial state.
0:40
There are two parts to this.
0:44
We need an initial view and
an editing view.
0:46
And we need to give the user buttons
to move between these two views.
0:49
When they click the buttons,
0:54
the code we write will alter the DOM to
reflect the view the user has moved to.
0:55
In other words, clicking Edit
will remove the text element and
0:59
add an input element, as well as changing
the Edit button to be a save button.
1:03
And clicking Save will
reverse those changes.
1:08
So as JavaScript programmers, we'll need
to write code to handle all these details.
1:11
So in this video,
we'll start by creating an Edit button for
1:16
the user, then we'll replace and
1:19
modify elements to move the list items
between the initial and editing states.
1:21
First, though, let's just focus
on adding the Edit button.
1:26
Well, you can add an Edit
button to each li element
1:29
by modifying our createLI function.
1:32
And we'll add it before the Remove button.
1:35
Now, the code we wrote earlier for
adding the Remove button
1:38
is nearly identical to the code
required for the Edit button.
1:41
We need to create the button,
set its text to Edit,
1:45
then append the button to
the list item element.
1:49
The Edit and Remove buttons will appear
next to each other, so let's copy
1:52
the three lines of code for the Remove
button and paste the new code above it.
1:57
Now that we have two buttons,
2:05
we need to rename these two
constants to differentiate them.
2:06
The edit button will be placed
before the removeButton.
2:10
So we'll name the first button editButton.
2:14
And change the name and
the two lines that follow as well.
2:20
Let's also set its text to edit.
2:28
Next, let's change the remove button's
constant to be more specific.
2:33
We'll name it removeButton and
change the name in the next two lines.
2:38
Now let's save our file and
preview our changes in the browser.
2:51
In the app, I'll enter a name,
let's say Faye.
2:58
And you can see the edit button
has been added to the list item.
3:02
I'll just add two more names,
Jim and Eden.
3:06
And then I'll click the remove button
to show it still removes the names.
3:10
But clicking on the edit button
deletes the names as well.
3:15
Can you think of why?
3:20
Well, let's look at the click
handler to delete names.
3:23
Remember, we placed it on the parent
ul element so it would catch any clicks
3:28
inside that element, then inside we
execute this code for any button clicks.
3:32
Since the edit button is
also inside the ul element,
3:38
clicking it also triggers
the code that deletes names.
3:42
So since there are two kinds of
buttons in the list items, Edit and
3:45
Remove, we need our handler
to distinguish between them.
3:50
So let's wrap the deletion
code in another if statement
3:54
that examines the text
content of the button.
3:59
As the condition, we'll type
e.target.textContent equals remove.
4:10
So now we're saying,
if the clicked element is a BUTTON and
4:22
if its text content is remove,
run this code.
4:28
And now the edit button
won't trigger this behavior.
4:32
We can create the behavior for the edit
button by following the same pattern.
4:36
In fact,
let's just copy this if statement here and
4:40
add it to the end as an else if statement.
4:44
Then we can change remove to edit.
4:54
And inside the else if block,
let's just console.log edit for now.
4:59
So now any buttons that receive clicks
will have their text content examined.
5:08
If the button text is remove,
this code block will run, and
5:14
if the text content is edit,
this code will run.
5:18
So let's see this in the browser.
5:21
I'll open up my console and
enter a few numbers just to
5:22
generate some list items quickly,
let's say one, two, three, and four.
5:27
In my list, clicking remove
still removes the list item.
5:33
But now clicking edit triggers
our console logging behavior.
5:38
All right, so great work.
5:45
You've added an edit button and
5:46
modified the click handler to run
code when that button is clicked.
5:48
So let's do some quick cleanup now.
5:53
Since we're examining the event
target in a number of ways,
5:55
let's create a constant to
make our code more readable.
6:00
We'll declare the constant right
under where we check the tag name.
6:04
Now, at this point,
we know the target element is a button.
6:08
So let's call the constant button.
6:11
Then let's change these
e.target to button.
6:19
And now our code is easier to read.
6:31
Now, that list item and parent ul element
here are a big part of this application.
6:33
It's likely that we'll need to
reference these elements again.
6:40
For example, in the edit button's handler.
6:43
So instead of hiding these constants
inside the button's if statement,
6:45
I'll move them outside
the if statement and
6:50
paste them right below
the button constant.
6:52
Grouping the declarations together
this way also makes our code look more
7:00
readable.
7:03
And now the code inside the if
statement is simpler and more focused.
7:04
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