JavaScript DOM Scripting By Example Editing and Filtering Names Filter Invitees Who Have Not Responded

yoav green
yoav green
8,611 Points

haven't been managed to hide the list items by changing the checkbox

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 haven't 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 += 1) {
      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 += 1) {
      let li = lis[i];
      li.style.display === '';
    }  
  }
});


function ctrateLI(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; // without return function javascript will return 'undefined' //
}


form.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value;
  input.value = '';

  const li = ctrateLI(text);
  ul.appendChild(li);
});


ul.addEventListener('change', (e) => {
//  console.log(e.target.checked);
  const checkbox = e.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 = 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';
    }
  }
});
Steven Parker
Steven Parker
173,943 Points

To facilitate analysis of the issue, please provide the HTML and CSS components also.

The best way to share an entire project is to make a snapshot (note: not "screenshot") of your workspace and post the link to it here.

1 Answer

Steven Parker
Steven Parker
173,943 Points

On lines 24, 26 and 32 you have comparison operators ("===") instead of assignment operators ("=") where you want to set the "display" property.

Try that snapshot next time, it's much handier (and less verbose)!