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

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Getting All Children of a Node with children

Tom Dakan
Tom Dakan
3,967 Points
Posted by Tom Dakan
Tom Dakan
3,967 Points

I'm seeing a strange behavior in this workspace (all of the versions that I've tested).

When I mouse over the list, all of the formatting including the buttons disappears. It behaves the same way in current versions of chrome and firefox. I'm using windows 10.

Any thoughts greatly appreciated. It's hard to work with the workspace when you can't interact with the items you are trying to change.

Steven Parker kindly pointed out that it might be helpeful for folks to have a snapshot of the workspace to check out. Here it is: https://w.trhou.se/torl4n8zw1

Mousing over the list causes all of the formatting and buttons to go away.

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

To make it possible for someone to check your issue, make a snapshot of your workspace and post the link to it here.

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

Thanks Steven. I've updated the question.

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

What I saw was that they didn't actually "go away" but all collapsed into a line. Then I found this in the script code:

listDiv.addEventListener('mouseout', () => {
  listDiv.textContent = listDiv.textContent.toLowerCase();
});

Assigning the "textContent" property of a parent element destroys all the child elements, so the first time you move the mouse into and then away from one of the items contained in the "list" div, all the contents (list, list items, buttons, etc) are lost and the div gets filled with just the texts they previously contained (converted to lower case).

I wonder if this code is actually part of this project, or could it be something left over from a previous one where "listDiv" was not a parent element? It doesn't make sense here, considering what "listDiv" is.

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

That makes sense. I'm pretty sure that the workspace on this: https://teamtreehouse.com/library/functions-as-parameters video is the first place where we see this workspace and it has the same behavior.

Good to know that setting the text content of a div wipes out the contents of the div.

Tom Dakan
Tom Dakan
3,967 Points
Tom Dakan
Tom Dakan
3,967 Points

Since it appears that this is a bug in the workspace, how does one go about reporting it?

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

You can report bugs as described on the Support page.