Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Editing and Filtering Names States of the Application

Hannah Cherba
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Hannah Cherba
Front End Web Development Techdegree Graduate 14,319 Points

Both buttons appear, but edit button won't post to console

Both the remove and edit buttons appear on the page with the name, the remove button works, but the edit button won't post to the console when clicked. I need a fresh set of eyes to help me look for errors. Thanks in advance!

https://teamtreehouse.com/workspaces/42152872#

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

function createLi(text) {
const li= document.createElement('li');       
  li.textContent= text;                 
  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;
};

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)=> {       
  const button = event.target;
  const li = button.parentNode;
  const ul = li.parentNode;
  if (button.tagName === 'BUTTON') {
     if (button.textContent === 'remove') {
    ul.removeChild(li); 
    }
  } else if (button.textContent === 'edit') {
    console.log('edit');
  }
});
Steven Parker
Steven Parker
231,275 Points

That link doesn't exist. Either you deleted the workspace, or tried to share a direct URL to it (which is temporary and only exists while you are using it).

You can use the snapshot function in the workspace and provide the link to that, which will persist as long as you retain the workspace.

1 Answer

Steven Parker
Steven Parker
231,275 Points

There's an issue with the nested conditionals. As it is now, the test for "edit" is only done when the tagName test fails.

You probably intended to perform the test for "edit" when the test for "remove" fails, so one of the closing braces is in the wrong place. Consistent use of indentation to reflect nesting levels will make this kind of error less likely to happen and easier to spot when it does.

Hannah Cherba
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Hannah Cherba
Front End Web Development Techdegree Graduate 14,319 Points

Thank you so much Steven! I was so focused on trying to find a word type error I didn't double check the brackets. It worked as soon as I changed it. Thanks again!