Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Changing Classes

Emil Torres
Emil Torres
8,653 Points

Why don't the label and input elements on the List Item show up at the same time?

I was just a little confused about this. The <label> element and the <input type="text"> element never show up together at the same time. They seem to take each others place within the list item. I would have thought that even with this code below that they would work correctly but show up next to each other like the rest of the elements.

https://w.trhou.se/cscp5yy871

Everything I did works I am just wondering about this. Its a behavior that I wasn't expecting. I was expecting to see both elements show up visually within the list item. They would equal each other per the code above. Is there something that I don't know about input elements?

Steven Parker
Steven Parker
218,679 Points

This is an incomplete code excerpt. It would help to see the whole thing, and any HTML or CSS it works with. Even better, make a snapshot of your workspace and post the link to it here.

Emil Torres
Emil Torres
8,653 Points

Sorry about that, first time asking a question on one of the lessons. Thank you for the guidance on the work space snapshot. This is really handy. Here is a snapshot of the work space.

https://w.trhou.se/cscp5yy871

Thank you for the help.

1 Answer

Steven Parker
Steven Parker
218,679 Points

It's all clear now with the snapshot. Let's take a look at the last bit of the CSS file:

/* Edit Task */
ul li input[type=text] {
  display:none;
}

ul li.editMode input[type=text] {
  display:block;
}

ul li.editMode label {
  display:none;
}

The first rule says that input fields are not shown, but the second rule says they are IF they are in a list item that has the class editMode. Now labels are shown by default, but the third rule says they are not shown if they are in a list item with the class editMode. So, by design, only one will appear at a time based on whether the list item they belong to has that class or not.

Then, when you consider that the JavaScript code copies the label text into the input field when you turn on edit mode, and copies anything you put into the input field back to the label when you turn off edit mode, you have a clever way to edit what's in a label when you need to, but put it back to the label when you are done. So when you're not editing, the label has no edit box around it and cannot be changed accidentally.

This is obviously the intended functionality, implemented by a combination of CSS and JavaScript.

Does it make sense now?

Emil Torres
Emil Torres
8,653 Points

Yes this makes perfect sense! Thank you