Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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!