JavaScript JavaScript and the DOM Responding to User Interaction Listening for Events with addEventListener()

Kate C
Kate C
13,433 Points

Why my listItems are not changing toUpperCase and toLowerCase?

Hello treehouse residents!

i might be blind, couldn't see what's wrong with my code here:

https://imgur.com/a/HuVUSK0 https://codepen.io/bookmonster/pen/VwvBKJd?editors=1010

Please help

2 Answers

Mohammad Azawi
PLUS
Mohammad Azawi
Courses Plus Student 4,668 Points
const listDiv = document.querySelector('.list');
//Getting elements by tag name it return html collection.
// in your code you just took the first element of index [0]
//const listItems = document.getElementsByTagName('li')[0];

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();
  });
  listItems[i].addEventListener ('mouseout', () => {
    listItems[i].textContent = listItems[i].textContent.toLowerCase();
  });
}
Kate C
Kate C
13,433 Points

Thank you so much Mohammad!