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
Terrance Corley
11,990 PointsCan someone tell me why we need the return statement in this function and why we only specify to return the li const?
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 button = document.createElement('button');
button.textContent = 'Remove';
li.appendChild(button);
return li; // why do we need this and why don't we return the other vars in this function?
};
form.addEventListener('submit', (e) => {
e.preventDefault();
const text = input.value;
input.value = '';
const li = createLI(text);
ul.appendChild(li);
});
2 Answers
Kristiana Georgieva
14,595 PointsHi! You only need to return the 'li' because everything else (the label, the checkbox, the button) is already attached to the 'li' element.
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); // here you are adding the checkbox to the "label" element
li.appendChild(label); // here you are adding the label (with it's checkbox) to the "li" element
const button = document.createElement('button');
button.textContent = 'Remove';
li.appendChild(button); // here you are also adding the 'button' element to the "li"
return li; // 'li' already has a label + checkbox and a button attached to it
};
Think of it the 'li' as a package deal. You've decided what that package will contain in the function itself.
Hope this helps. Good luck & happy coding :) !
Barry Cantrell
68 PointsThat makes sense Kristiana. Thanks.
Terrance Corley
11,990 PointsTerrance Corley
11,990 PointsI don't know how I wasn't grasping this last night. Haha thank you so much, Kristiana! Makes perfect sense. :)