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 trialConan Ngan
Full Stack JavaScript Techdegree Student 6,967 Pointswhy does my checkbox lose functionality?
when I replace this code with the example in the event handler for button presses my the attending checkboxes are able to be checked again( which i want) , but I don't know why..
mine
ul.addEventListener('click', (e) => {
e.preventDefault();
const button = e.target;
const li = event.target.parentNode;
const ul = li.parentNode;
if(button.tagName === 'BUTTON' && button.textContent === 'remove'){
console.log(button.textContent);
// li.remove();
ul.removeChild(li);
}else if (button.textContent === 'edit'){
const oldName = li.firstChild.textContent;
const input = document.createElement('input');
input.type = 'text';
li.firstChild.textContent = '';
input.value = oldName;
li.prepend(input);
button.textContent = 'save';
} else if( button.textContent === 'save'){
button.previousElementSibling.previousElementSibling.textContent=
li.firstElementChild.value;
li.firstElementChild.remove();
button.textContent = 'edit';
}});
example
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;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
}});
2 Answers
Steven Parker
231,236 PointsYou forgot to include the HTML portion of the code, or the part of the JavaScript where "ul" gets defined. You might want to take a look at this video about Posting a Question. And for when your question refers to something you are doing in a workspace, you may also want to view this one about sharing a snapshot of your workspace.
Also, it's not apparent that this code deals with any checkboxes. But one obvious difference is that when a "save" button is clicked, the original code restores the <span> element that was removed when "edit" was clicked. The first example shown here doesn't restore that span.
Conan Ngan
Full Stack JavaScript Techdegree Student 6,967 PointsOk thanks. I'll try to make it easier to address next time.