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) Responding to User Interaction Listening for Events with addEventListener()

Posted by Jenn Glas
Jenn Glas
9,475 Points

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
229,744 Points
Steven Parker
Steven Parker
229,744 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)
Jenn Glas
Jenn Glas
9,475 Points

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
229,744 Points
Steven Parker
Steven Parker
229,744 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.