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

Posted by Grace Provost
Grace Provost
7,698 Points

Why listItems[i].textContext = listItems[i].textContext.toUpperCase();?

Why doesn't listItems[i].textContent.toUpperCase(); work directly to edit the DOM? When playing in the console, it seemed to print the capitalized list item in the console instead of changing it within the DOM. Why is this?

From this video: https://teamtreehouse.com/library/listening-for-events-with-addeventlistener

2 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

The toUpperCase method takes a string and returns a new string that is uppercased. It does not modify the string it is called on. So when you use this code:

listItems[i].textContext.toUpperCase();

You are simply telling JavaScript to take the string contained in listItems[i].textContext and create an uppercase version, and that is exactly what it does, and nothing more. In order to actually change the string stored in listItems[i].textContext you have to explicitly tell JavaScript to assign a new value to it. Which is what you do when you run:

listItems[i].textContext = listItems[i].textContext.toUpperCase();
Dan Noyes
Dan Noyes
6,183 Points
Dan Noyes
Dan Noyes
6,183 Points

I'm a complete beginner, but I just watched this video a few days ago. I went back and looked at my notes and rewrote the for loop in workspaces and got it to work... Here's the code I used:

const listItems = document.getElementsByTagName('li');
for (let i=0; i < listItems.length; i+=1) {
 listItems[i].addEventListener('mouseover', () => {
   listItems[i].textContent = listItems[i].textContent.toUpperCase();
  }
)};

Not entirely sure how to answer your question though. Hope this helps!