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

why will my code not work. it says there is something wrong with line 13

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 (i = 0; i < lis.length; i += 1) {
      let li = lis[i];
      if li.className === ('.responded') {
        li.display = '';
      } else {
        li.display = 'none';
        li.style.display = '';
      }
  } else {
    for (i = 0; i < lis.length; i += 1)
      let li = lis[i];
  }

});

4 Answers

Jack Dolitsky - Hey Jack, I am going through this course right now. The specific problem that you pointed to inside your code:

 div.appendChild('filterLabel');
div.appendChild('filterCheckBox');

you only made a tiny mistake! And that is the same one that I have made. You don't need the ' ' once something is declared as a variable: const, var, or let. Since filterLabel and filterCheckBox are declared as a variable, just remove the ' ', like so:

div.appendChild(filterLabel);
div.appendChild(filterCheckBox);

I hope your still growing in your code journey!

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 25,764 Points

Hey, Jack!

I formatted your code for better readability. Not sure if you're still stuck, but there are a couple of syntax issues:

- if li.className === ('.responded') {
+ if (li.className === '.responded') {

and you're missing a closing } after line 27.

I was able to spot these by pasting your code in my code editor (VS Code in my case) with the proper language set. It gave me red "squiggles" wherever it saw a problem. Hope this helps!

it should be :

if (li.className === ('responded')

you missed the opening bracket and you added a period which isn't required before responded.

Rich Donnellan
Rich Donnellan
Treehouse Moderator 25,764 Points

The period is required since it is a class.

I also formatted the code in your answer. Check out the Markdown Cheatsheet below the Add an Answer submission for syntax examples, or choose Edit Question from the three dots next to Add Comment to see how I improved the readability.

if (li.className === 'responded') {}. sorry this is correct regarding the syntax. earlier i missed deleting the inner bracket around responded className. Also Rich you said that the period is required but the video example does not use the period ?