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

Siddharth Pandey
Siddharth Pandey
4,171 Points

Why does this not work for creating a save state?

At the end of the video Guil gave us a challenge of creating a save state here is my code by I get the syntax error: "error unexpected token )" whenever I attempt to run this code why is this?

const form = document.querySelector('#registrar');
const input = form.querySelector('input');
const ul = document.querySelector('#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';
  li.appendChild(editButton);

  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  li.appendChild(removeButton);

  return li;
}


form.addEventListener('submit', function submit(name) {
  name.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});

ul.addEventListener('change', function styling(e) {
  const checkbox = e.target;
  const checked = e.target.checked;
  const listItem = checkbox.parentNode.parentNode;
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

ul.addEventListener('click', function remove(e) {
const listItem = e.target.parentNode;
const ul = listItem.parentNode;
const button = e.target;
const li = button.parentNode;
 if (button.tagName == 'BUTTON') {
     if (button.textContent === 'Remove') {
      ul.removeChild(listItem);
   } else if (button.textContent === 'Edit') {
     const span = li.firstElementChild;
     const input = document.createElement('input');
     input.type = 'text';
     li.insertBefore(input, span);
     li.removeChild(span);
     button.textContent = 'Save';
   } else if (button.textContent === 'Save') {
     createLI(input);
 }
});

1 Answer

rydavim
MOD
rydavim
Treehouse Moderator 17,095 Points

It looks like there is a secondary problem with your Save button, but to solve the current issue - you're just missing a closing } on your if statement in the last section.

ul.addEventListener('click', function remove(e) {
const listItem = e.target.parentNode;
const ul = listItem.parentNode;
const button = e.target;
const li = button.parentNode;
 if (button.tagName == 'BUTTON') {
     if (button.textContent === 'Remove') {
      ul.removeChild(listItem);
   } else if (button.textContent === 'Edit') {
     const span = li.firstElementChild;
     const input = document.createElement('input');
     input.type = 'text';
     li.insertBefore(input, span);
     li.removeChild(span);
     button.textContent = 'Save';
   } else if (button.textContent === 'Save') {
     createLI(input);
 }
} // CLOSING BRACE GOES HERE
});

That'll fix the error and you can then work on the Save. Let me know if you have any follow up questions. Good luck, and happy coding!

Siddharth Pandey
Siddharth Pandey
4,171 Points

Guill explained how to make the save button in the next video. However, when I attempted it again nothing was actually saving when I pressed save, no text appeared, can you please tell me what is wrong with my code.

const form = document.querySelector('#registrar');
const input = form.querySelector('input');
const ul = document.querySelector('#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';
  li.appendChild(editButton);

  const removeButton = document.createElement('button');
  removeButton.textContent = 'Remove';
  li.appendChild(removeButton);

  return li;
}


form.addEventListener('submit', function submit(name) {
  name.preventDefault();
  const text = input.value;
  input.value = '';
  const li = createLI(text);
  ul.appendChild(li);
});

ul.addEventListener('change', function styling(e) {
  const checkbox = e.target;
  const checked = e.target.checked;
  const listItem = checkbox.parentNode.parentNode;
  if (checked) {
    listItem.className = 'responded';
  } else {
    listItem.className = '';
  }
});

ul.addEventListener('click', function remove(e) {
const listItem = e.target.parentNode;
const ul = listItem.parentNode;
const button = e.target;
const li = button.parentNode;
 if (button.tagName == 'BUTTON') {
     if (button.textContent === 'Remove') {
      ul.removeChild(listItem);
   } 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';
   }
 }
});

Thanks for the help! Sid

rydavim
rydavim
Treehouse Moderator 17,095 Points

You've got a typo where you forgot to camelCase textContent.

else if (button.textContent === 'Save') {
     const input = li.firstElementChild;
     const span = document.createElement('span');
     span.textContent = input.value; // HERE
     li.insertBefore(span, input);
     li.removeChild(input);
     button.textContent = 'Edit';
   }

Should work if you fix that - your code looks good. console.log statements are really helpful for working out these kinds of problems. If you put one after that line, you can see that the content is empty.

Happy coding!