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 Improving the Application Code Refactor 2: Readable Branching Logic

shirshah sahel
shirshah sahel
10,035 Points

Refactor 2: Readable Branching Logic

After briefing the code in ul.AddEventListener nothing is working properly. Not sure why?? I will cope my workspace code below .

document.addEventListener('DOMContentLoaded', ()=>{
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'nt invited";
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 span= document.createElement('span');
  const li= document.createElement('li');
  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.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)=>{
 if (e.target.tagName==='BUTTON' ){
   const button= e.target;
    const li= button. parentNode;
   const ul= li. parentNode;
   function removeName(){
   ul.removeChild(li);
   }
function editName(){
   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';
   }
 function saveName{
      const input= li.firstElementChild;
   const span= document.createElement('span');
   span.textContent=input.value;
   li.insertBefore(span, input);
   li.removeChild(input);
   button.textContent= 'edit';
   }
 if (button.textContent==='remove'){  
removeName();   
 }else if(button.textContent === 'edit'){
  editName();

 }else if(button.textContent === 'save'){
   saveName();
   }
  }                   
 });
});
Steven Parker
Steven Parker
229,645 Points

The issue can't be observed without the rest of the code. But you can easily share the entire workspace if you make a snapshot of your workspace and post the link to it here.

7 Answers

Steven Parker
Steven Parker
229,645 Points

You did exactly the right thing by posting the link to your snapshot.

Using your link I was able to identify a syntax error on line 99 of app.js:

 function saveName{

This function definition is missing the parentheses after the function name.

Bruno Navarrete
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bruno Navarrete
Full Stack JavaScript Techdegree Graduate 22,246 Points

If that's your actual code, you should remove the space between the . and the parent nodes:

const li= button. parentNode; // should read   ------>   const li= button.parentNode;
const ul= li. parentNode; //  should read   ------>   const ul= li.parentNode;
Steven Parker
Steven Parker
229,645 Points

That spacing would be ignored. It does look a bit odd there, but it would not cause a problem.

shirshah sahel
shirshah sahel
10,035 Points

Thanks for the feedback guys. That was my entire workspace that I have shared. still trying to figure out what am I missing.

Steven Parker
Steven Parker
229,645 Points

A workspace snapshot would also include the HTML and CSS code (if any) that this script depends on, plus it would provide an environment for observing and analyzing the issue.

shirshah sahel
shirshah sahel
10,035 Points

[https://w.trhou.se/4gy1zhabee] I took a snapshot but couldn't copy and paste it here. it did'nt give me the option to copy it. so I copied the link from the top of the page and paste it here. hope this should work or any recommendation on how to do it.

shirshah sahel
shirshah sahel
10,035 Points

Thank you so much Parker for clearing that up. Now it worked. you have saved me so much time.

How do I run the snapshot in my Atom editor? I'm still a noob please help.

Steven Parker
Steven Parker
229,645 Points

The "snapshot" is a feature of the Treehouse workspace that makes it easy for any student to re-create the environment and analyze issues.

If you're working with an external IDE, it might have it's own sharing feature — check the documentation. But it would require hosting in an external REPO, and could only be used by others who use the same product.

For collaboration, you might consider uploading your project into a workspace, or using a public sandbox service like codepen, JsBin, or JsFiddle.

Being that all this is new to me. I do have Atom running so how can I link the snapshot to it. I do have Github.

Steven Parker
Steven Parker
229,645 Points

Sorry if I was unclear. A "snapshot" link can only be made from a Treehouse workspace.

I don't know "Atom", or if it has any sharing feature. But you could upload your project to your Github repo.

Also be sure to start a new question of your own to ask for help with it. Anything added to an old question (like this) will likely only be seen by the original poster and those who answered it.