JavaScript DOM Scripting By Example Editing and Filtering Names Moving to an Editing State

SAMUEL LAWRENCE
PRO
SAMUEL LAWRENCE
Pro Student 8,447 Points

woohooooo, I did it.

Woo hoo, I did it. I don't know if it's ok to post this here since it's not a question, but it's a solution so here goes. I was able to figure out the solution to implement a saved state and it works so nicely. I'm so elated right now. woo hoo. here is the app. Since there is a lot of code I'm just sharing the part I wrote.

else if (button.textContent === 'save') {
      const input = li.firstElementChild;
      const newName = document.createElement('span');
      newName.textContent = input.value;
      li.insertBefore(newName, input);
      li.removeChild(input);
      button.textContent = 'edit';
    }

So I took Guil Hernandez hint and undid everything we did to add the edit input field.

  1. I first select the input using the first element child property.
  2. Next I created the span element I wanted to replace the input with.I called it newName.
  3. I then set it's text content to be the value of the input.
  4. I used the input to place the new span element into the DOM using insert before.
  5. I called removeChild on the input to remove it.
  6. finally I changed the button's text content to say edit, which is what it was in the original state.

Woooooo!!! Sorry guys I'm just excited.

Oh I forgot to mention, I DIDN'T LOOK AT THE SOLUTION VIDEO!

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Pro Student 8,447 Points

I had to mention that I didn't look at the video, because after I looked at the video, Guil Hernandez code was exactly like mines. lol. That's a first.

1 Answer

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Well done, SAMUEL LAWRENCE. It feels great when things begin to click. Congrats! :)

SAMUEL LAWRENCE
SAMUEL LAWRENCE
Pro Student 8,447 Points

It sure does. Thanks for the reply Guil Hernandez . Means a lot man.