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 Filter Invitees Who Have Not Responded

Conan Ngan
seal-mask
.a{fill-rule:evenodd;}techdegree
Conan Ngan
Full Stack JavaScript Techdegree Student 5,363 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
218,596 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.