Welcome back.
In this lesson, we're going to add the ability to edit the elements, and this is, as I said, a little
bit more tricky than the delete because we need to have the ability to update the my list changes maybe
into an input field and then have the ability for the user to update some of that content.
So let's add that in.
And the same way that we did the vent listener first span one, we can do the event listener for span
two, or we could have it as a separate function.
And in this case, we're going to do it all within that same function.
And of course, you can break it up as needed, of course.
So we've got our event listener.
We've got a function and this function, we want to have the ability to update that element.
So let's first we're going to select the parent.
So taking our variable and we could always select roll as well, because we do have it within a roll
object so we can do something easy like roll style and do background color and set the background color
to, let's say, yellow.
So we so we click edit.
You see that it turns yellow.
So that's ideal.
And that's actually a pretty good way to go.
The other thing that we want to do is we want to update the we want to be able to update the contents
that are contained within there and we want to change that to an input field, but we want to use the
value that's contained within there.
So it might be bananas and it might be something else.
And we know because we're building out the list and we're just building it out right now, that we know
the value that's contained within there.
But let's say, for instance, we don't know the value and we want to be able to get the value.
I'll show you how you can do that.
So let's do temp vao and selecting that item, we can use the first element child and return back that
property and then do the inner text of that first element child.
And we'll use console log that for now so you can see that within our console.
So see what that looks like.
So when we press edit we get milk and I know we could have gone and we know what is contained within
the list.
And I did want to introduce the first element child and just different ways to traverse through the
elements.
So that's why we're going about it in a little bit longer format.
So next to that we want to do is we want to be able to create an element on the fly.
So let's use CONSED and this is going to be our new input.
Let's just call it new input.
In using the document creates elements and was create an input area and the value of the new input,
we're going to set it as temp value.
So it's going to contain that same value that's within the temp that and we're also going to focus on
that new input.
So we're going to apply focus to that new input.
And we also want to add that in to append it to our parent as well.
So I'm going to update this and I'm going to change that to temp element.
And I take the entire text and I move it over to temp value.
So we're still selecting that same element.
But now I can grab that element and I can update some of that inner text of that element.
So if I wanted to append a child to there and we can append that new input to it.
So sure.
What that looks and don't forget to update this one as well to temp element so that we're not have any
lingering elements.
So now whenever we click it, we get this and this one needs to be updated as well.
That's where we're throwing that error.
So whenever we click it, we get that input area.
And we also need to also remove out that existing content that's contained within there so we can take
our temp element and do inner HTML and just set that to blank so that will get rid of the existing.
So we're turning it into an input field and this gives us the ability obviously, to update it and change
it, change the functionality.
So we're going to add another event listener on this input field that we're just created.
So taking our new input.
So this one is just blurts it's not on Blu and we can launch a function whenever that event listener
gets triggered.
So what we want to do is whenever we're updating this, we want to select that temp element and update
the inner HTML with the value of the new input.
So let's try that out, see where we are right now.
So now if I update it, we can click off of it and we can see that we're actually updating that inner
HTML with that new value.
So we click edit again with apples and we click off of it.
There we go.
We've got our added value and we can remove some content if we want.
And as soon as we click off of it, as soon as we do the on Blu, then that means that whenever the
blur goes off, that means that we've finished editing it.
So it's removing it from the visual area.
And just as we've seen before that because this element isn't appearing anymore on the page, that doesn't
mean that's disappeared.
So we still have that value lingering in the background of JavaScript and that's where we're able to
still apply it, even though we're removing it out of the inner HTML.
One last thing.
We want to change that back to white.
So let's take that color and we're going to update it and turn it back to its original, which was white.
So just as we've done before, we're going to take the mildest and we've got an index value for that
and we're going to update it to be whatever the value of the input value.
So let's try that out.
So now, whenever I edit, I can write a bunch of stuff and when I press delete, it rebuilds the list.
And that means that this value now is sitting within our list.
And you can see that there when we're outputting all of the list values.
So we're able to successfully edit it.
And when we click off of it, then the editing completes, it's go good and not in all of this functionality.
And coming up next, we'll do a final code review as well as a few tweaks and adjustments to the code.