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
Earlier, I challenged you to move list items to a saved state when the save button was clicked. In this video, I'll show you one solution to this challenge.
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
In the last video, I challenged you
to move list items to a saved state,
0:00
when the Save button was clicked.
0:05
Now I'll show you how I
solved this challenge.
0:07
First though let's think
through the problem.
0:09
Remember when I talked about reversing
the edit state to get to the saved state?
0:12
To get to the edit state we exchanged
the span element with an input element and
0:17
we also changed the edit
button to read save.
0:22
And to get back we need to reverse those
changes, taking the end put out and
0:25
putting a span in.
0:30
And we also need to change
the save button to read edit.
0:31
So just like we did for the edit state,
0:35
we'll first add a branch to the else
if statement here in the click handler.
0:37
And this new branch is going to
handle any clicks on a save button.
0:43
Since this new branch is going to
reverse the effects of the edit branch,
0:47
I'm going to copy this
edit else if branch, and
0:52
paste it at the end to
create the new save branch.
0:56
Then we'll make the appropriate
changes in this new branch.
0:59
So first for the condition.
1:04
We want to target buttons with
the text content of save.
1:06
And now the first child element of
the list item will be an input instead.
1:13
So it will change the span
constant to be input.
1:19
Likewise we want to create a new span.
1:23
So right below will say const
span document.createElement span.
1:26
And we don't need to set the spans type,
so we can delete this line and
1:34
we wanna set the spans text content
to the inputs value because
1:39
these represent the edits
the user has made to the name.
1:44
So we'll switch up this next line by
putting what's on the left side of
1:49
the equals or the assignment operator
on the right and vice versa.
1:53
So this is going to say
span.textContent = input.value.
1:59
And now to append the span
element before the input,
2:06
we need to reverse these
arguments as well.
2:11
So we'll make the first argument span and
the second argument input.
2:14
Then we want to remove the input.
2:20
And finally set the text
content of the button to edit.
2:24
All right let's try this
out in the browser.
2:30
I'll refresh the page and
submit the name, Dennis, And click edit.
2:34
So far so good, so
now I'll just change this to Denise.
2:43
And when I click save, it works.
2:49
So you've just implemented a simple
editing capability to our application.
2:52
And then in the next video we'll add
a way to filter out invitees who have yet
2:56
to respond.
3:01
That way our users can see
the guest list at a glance.
3:02
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