JavaScript JavaScript and the DOM 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
186,663 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
186,663 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.