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 trialshirshah sahel
10,035 PointsRefactor 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();
}
}
});
});
7 Answers
Steven Parker
231,236 PointsYou 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
Full Stack JavaScript Techdegree Graduate 22,246 PointsIf 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
231,236 PointsThat spacing would be ignored. It does look a bit odd there, but it would not cause a problem.
shirshah sahel
10,035 PointsThanks for the feedback guys. That was my entire workspace that I have shared. still trying to figure out what am I missing.
Steven Parker
231,236 PointsA 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
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
10,035 PointsThank you so much Parker for clearing that up. Now it worked. you have saved me so much time.
Conary Beckford
Full Stack JavaScript Techdegree Student 5,046 PointsHow do I run the snapshot in my Atom editor? I'm still a noob please help.
Steven Parker
231,236 PointsThe "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.
Conary Beckford
Full Stack JavaScript Techdegree Student 5,046 PointsBeing 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
231,236 PointsSorry 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.
Steven Parker
231,236 PointsSteven Parker
231,236 PointsThe 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.