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 Saving Names

karan Badhwar
seal-mask
.a{fill-rule:evenodd;}techdegree
karan Badhwar
Web Development Techdegree Student 13,000 Points

Why my code is not working and is it an ok way to write this solution

Hi, I tried to modify the solution it is working only if I don't write

button.textContent = 'Edit'; again why is that and is my solution Ok?

   button.addEventListener('click', (e) => {
          const span = document.createElement('span');
          span.textContent = input.value;
          li.insertBefore(span, input);
          li.removeChild(input);
          button.textContent = 'Edit';

Here is a snapshot as well.

https://w.trhou.se/t8jkhbpy37

1 Answer

Bob Swaney
Bob Swaney
13,010 Points

It looks to my like you are missing another 'else if' clause... i.e. else if (button.textContent === 'Save') {

then all of the stuff that the form data saves along with flipping the button back to 'Edit' }

It looks like its not working as is because you are already in a block that has a click event on the 'ul'. so when the button is clicked and it says 'Edit' it's trying to fire 2 click events due to 'Event Bubbling'. So because the button already says 'Edit', its firing the 'else if' clause which is then triggering another click event on the button that says 'Edit' and keeping the text context as 'Edit'

Hope this clarifies and is even the right answer! Good Luck!