Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

SAMUEL LAWRENCE
PLUS
SAMUEL LAWRENCE
Courses Plus 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
Courses Plus 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! :)