Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

Conan Ngan
seal-mask
.a{fill-rule:evenodd;}techdegree
Conan Ngan
Full Stack JavaScript Techdegree Student 6,965 Points
Posted by Conan Ngan
.a{fill-rule:evenodd;}techdegree
Conan Ngan
Full Stack JavaScript Techdegree Student 6,965 Points

why does my checkbox lose functionality?

when I replace this code with the example in the event handler for button presses my the attending checkboxes are able to be checked again( which i want) , but I don't know why..

mine

ul.addEventListener('click', (e) => {
  e.preventDefault();
  const button = e.target;
  const li = event.target.parentNode;
  const ul = li.parentNode;

  if(button.tagName === 'BUTTON' && button.textContent === 'remove'){
  console.log(button.textContent);
   // li.remove();
    ul.removeChild(li);
  }else if (button.textContent === 'edit'){
    const oldName = li.firstChild.textContent;
    const input = document.createElement('input');
    input.type = 'text';
    li.firstChild.textContent = '';
    input.value = oldName;
    li.prepend(input);

    button.textContent = 'save';
  } else if( button.textContent === 'save'){

    button.previousElementSibling.previousElementSibling.textContent= 
    li.firstElementChild.value;
    li.firstElementChild.remove();
    button.textContent = 'edit';
  }});

example

ul.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    const button = e.target;
    const li = button.parentNode;
    const ul = li.parentNode;
    if (button.textContent === 'remove') {
      ul.removeChild(li);
    } else if (button.textContent === 'edit') { 
      const span = li.firstElementChild;
      const input = document.createElement('input');
      input.type = 'text';
      input.value = span.textContent;
      li.insertBefore(input, span);
      li.removeChild(span);
      button.textContent = 'save';
    } else if (button.textContent === 'save') { 
      const input = li.firstElementChild;
      const span = document.createElement('span');
      span.textContent = input.value;
      li.insertBefore(span, input);
      li.removeChild(input);
      button.textContent = 'edit';
    }
  }});

2 Answers

Steven Parker
Steven Parker
229,670 Points
Steven Parker
Steven Parker
229,670 Points

You forgot to include the HTML portion of the code, or the part of the JavaScript where "ul" gets defined. You might want to take a look at this video about Posting a Question. And for when your question refers to something you are doing in a workspace, you may also want to view this one about sharing a snapshot of your workspace.

Also, it's not apparent that this code deals with any checkboxes. But one obvious difference is that when a "save" button is clicked, the original code restores the <span> element that was removed when "edit" was clicked. The first example shown here doesn't restore that span.