edit and remove buttons no longer working

Question

after refactoring the creating and adding of elements as demonstrated my edit and remove buttons no longer do anything in the browser. can someone review? i haven't changed anything wrt to the event listeners...

document.addEventListener('DOMContentLoaded', () => {

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

const div = document.createElement('div');
const filterLabel = document.createElement('label');
const filterCheckbox = document.createElement('input');

filterLabel.textContent = "Hide those who have not responded." 
filterCheckbox.type = 'checkbox'
div.appendChild(filterLabel);
div.appendChild(filterCheckbox); 
mainDiv.insertBefore(div, ul); 

filterCheckbox.addEventListener('change', (e) => {
const isChecked = e.target.checked;
const lis = ul.children; 
if (isChecked) {
for (let i = 0; i< lis.length; i++) {
  let li = lis[i];
  if (li.className ==='responded') {
    li.style.display = ''
  } else {
    li.style.display = 'none'
  }
}
} else {
for (let i = 0; i< lis.length; i++) {
  let li = lis[i];
  li.style.display = ''
}
}
}); 

function createLi(text) {

  function createElement (elementName, property, value) {
    const element = document.createElement(elementName);
    element[property] = value; 
    return element; 
  }

  function appendtoLI(elementName, property, value) {
    const element = createElement(elementName, property, value);
    li.appendChild(element); 
    return element; 
  }

    const li = document.createElement('li');
    appendtoLI('span', 'textContent', text);
    appendtoLI('label', 'textContent', 'confirmed')
        .appendChild(createElement('input', 'type', 'checkbox'));
    appendtoLI('button', 'textContent', 'edit');
    appendtoLI('button', 'textContent', 'remove');
    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 button = e.target; 
const li = e.target.parentNode; 
const ul = li.parentNode; 

if (button.textContent === 'Remove') {
  ul.removeChild(li); 
} 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'
}
}
})

});

Answer 1 · 2020-12-27T19:26:55Z

December 27, 2020 7:26pm

Hi Dahlia Rizk

The textContent of the Edit and Remove button does not match with the textContent of their if condition.

You just need to capitalize E of Edit and R of Remove in their appendtoLi function.

Like this:

const li = document.createElement('li');
        appendtoLI('span', 'textContent', text);
        appendtoLI('label', 'textContent', 'Confirmed')
            .appendChild(createElement('input', 'type', 'checkbox'));
        appendtoLI('button', 'textContent', 'Edit');
        appendtoLI('button', 'textContent', 'Remove');
        return li;

I remember getting stuck to this same issue as well.

Welcome to the Treehouse Community

Looking to learn something new?

Dahlia Rizk

Dahlia Rizk

edit and remove buttons no longer working

1 Answer

Zaid Khan

Zaid Khan