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

Daniel Bateman
Daniel Bateman
13,268 Points

'responded' class is no longer working due to a issue with the node.

responded class was working until I added the function to hide unconfirmed RSVP's.

Console gives me the following errors: TypeError: Argument 1 of Node.appendChild is not an object.[Learn More] app.js:49:2 ReferenceError: event is not defined[Learn More] app.js:78:9

Would someone look at my code and see if they can locate the error? Below is my code. Thanks in advance!

Sorry, this is my updated code- realized I had some missing semicolons, but the problem still persists.

console.log("Hello, from app.js");

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

    }

}

});

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


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);
  ul.appendChild(li);
   const editButton= document.createElement('button');
  editButton.textContent= 'edit';
  li.appendChild(editButton);

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


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 = 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;
      input.value= span.textContent;
      li.insertBefore(span, input);
      li.removeChild(input);
      button.textContent = 'edit';

} 
}

});

2 Answers

KRIS NIKOLAISEN
PRO
KRIS NIKOLAISEN
Pro Student 46,077 Points

The issue is with your createLi function. There is an extra line of code and it also doesn't return anything.

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);
  // ul.appendChild(li); //<--------------remove this
   const editButton= document.createElement('button');
  editButton.textContent= 'edit';
  li.appendChild(editButton);

  const removeButton= document.createElement('button');
  removeButton.textContent= 'remove';
  li.appendChild(removeButton);
return li; //<---------------add this
}

also check

filterCheckBox.addEventListener('change',  (e) => {

for the spaces in this line

li. style .display = 'none';
Daniel Bateman
Daniel Bateman
13,268 Points

Thanks, that solved my problem!