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
Abdi Ahmed
7,151 PointsI can't fully understand the Edit Task function
Hi everyone!
I'm just having a little difficulty understanding the logic in the Edit task function in the "Interactive Web Pages with JS". Everything else is crystal clear. I just can't wrap my head round how the edit function works, my understanding is that when the edit button is clicked - the input element with type text is displayed and the value that it contains is pulled from the label and assigned as the value for the input text area. So, when the button is clicked again, the edit mode class is removed from the the parent list item and the input element is hidden and whatever that was written as input into the input element is used as the label and only the label is visible.
Is my understanding correct here?
Also, what happens to the input element when only the label is displayed? It is hard coded into the HTML, but doesn't display until the edit button is clicked. I couldn't see any code that hides and displays the input element on the DOM. Did I over look something in the CSS file?
Thanks
2 Answers
Ryan Field
Courses Plus Student 21,242 PointsYes, your understanding of the function is correct: when the class editMode is assigned, the text from the label is assigned to the input's value, and when editMode is removed, the input text's value is set as the label's text.
The hiding of the two elements (depending on whether the user is editing a task item) is handled in the CSS in this case. If you take a look at the very bottom of that file, you'll see how it's done there.
Abdi Ahmed
7,151 PointsPerfect! I swear I looked at it before - but it has just magically appeared! Thank you so much Ryan.