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

Bob Allan
Bob Allan
10,900 Points

Why is my text not replaced with an input element?

I'm stuck on the step where the span is replaced by the input element. For some reason they both stay on the screen when loaded. I suspect the problem is at the bottom, on the lines highlighted. What am I missing here?

const form = document.getElementById('registrar');
const input = form.querySelector('input');
const ul = document.getElementById('invitedList');

function createLI(text) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  span.textContent = text;
  li.appendChild(span);
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);  
  const editButton = document.createElement('button');
  editButton.textContent = 'Edit';
  label.appendChild(editButton);  
  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  label.appendChild(removeButton);
  return li;
}

//this is the submit handler
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});

// this event handler marks guests off when they respond to user's RSVP
ul.addEventListener('change', (e) => {
  const checkbox = event.target;
  const checked = checkbox.checked;
  const listItem = checkbox.parentNode.parentNode;

  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

//this handler is for the Remove and Edit buttons
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';
     li.insertBefore(input, span);   //Is the problem here?
     li.removeChild(span);             // Or maybe here?
   }
  }
});

1 Answer

Steven Parker
Steven Parker
200,417 Points

In the "createLI" function, the buttons are placed inside the label instead of the list item. The navigation done in the event handler doesn't give the intended results with that arrangement.

  label.appendChild(editButton);   // this should probably append to "li" instead of "label"
Bob Allan
Bob Allan
10,900 Points

Oh man, Steven Parker, you are a sanity saver. That totally makes sense. Thank you sir!