JavaScript DOM Scripting By Example Adding and Removing Names Removing Names

michael edmondson
michael edmondson
2,590 Points

I keep getting create li not defined when i debug line 26

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


function creatLI(text){
  const li = document.createElement('li');
  li.textContent = text;
  const label = document.createElement('label');
  label.textContent = 'Confirmed';
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  label.appendChild(checkbox);
  li.appendChild(label);
  const button = document.createElement('button');
  button.textContent = 'remove';
  li.appendChild(button);
  return li;
}


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

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 = '';
  }
})

ul.addEventListener('click', (e) => {
  if(e.target.tagName === 'BUTTON'){
  const li = e.target.parentNode;
  const ul =li.parentNode;
  ul.removeChild(li);
  }

})
Fernando Boza
Fernando Boza
24,154 Points

be sure to format your code with markup.

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

function creatLI(text) {
    const li = document.createElement('li');
    li.textContent = text;
    const label = document.createElement('label');
    label.textContent = 'Confirmed';
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    label.appendChild(checkbox);
    li.appendChild(label);
    const button = document.createElement('button');
    button.textContent = 'remove';
    li.appendChild(button);
    return li;
}

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

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 = '';

    }
})

ul.addEventListener('click', (e) => {
    if (e.target.tagName === 'BUTTON') {
        const li = e.target.parentNode;
        const ul = li.parentNode;
        ul.removeChild(li);
    }
})

1 Answer

Fernando Boza
Fernando Boza
24,154 Points

michael edmondson it's because you're calling createLI instead of creatLI ... it looks like a typo in the function you created. If you look closely one is missing the letter E at the end of the word create