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 JavaScript and the DOM (Retiring) Responding to User Interaction Listening for Events with addEventListener()

What does the .textContent represent?

It helps me to think of these as formulas.

listItems.addEventListenter('mouseover', () => { listItems.textContent = listsItems.textContent.toUpperCase(); });

listItems.addEventListenter('mouseover', () => { listItems.textContent = listsItems.textContent.toLowerCase(); });

Can you label each section of this code, especially the .textContent? Thanks!

1 Answer

Steven Parker
Steven Parker
216,083 Points

That's the attribute that contains what will be shown on the page.

The .textContent attribute holds the text that will be displayed for the element when the page is rendered. It's an attribute that is common to many element types.

But your code appears to have a few errors:

  • you spelled "addEventListenter" instead of "addEventListener" two times.
  • you have two handlers for the same event on the same object that both alter the same value (in different ways)

Thank you. Where would you find .textContent is an attribute? Would it be in the HTML? Or is it something you find in the MDN?

Yes, I see that my code has those errors now. I was copying from a video. Thank you for catching those errors. It should read: listItems.addEventListener('mouseover', () => { listItems.textContent = listsItems.textContent.toUpperCase(); });

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

Steven Parker
Steven Parker
216,083 Points

Here's the MDN page for textContent. From the JavaScript perspective, it's a property of a Node.

From the HTML perspective, it's not likely to be used as an attribute. You would just write text between the start and end tags for the element.