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

Sandrin John
Sandrin John
6,297 Points

the loop is not working nor does the uppercase and lowercase

const listItems = document.getElementsByTagName('li')[0];

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();
                           });

}

3 Answers

Kieran Barker
Kieran Barker
14,986 Points

Hey buddy, the [0] at the end of your constant means you're only selecting the first list item — you need to select all of them by removing that part :-)

const listItems = document.getElementsByTagName('li'); 
// removed [0] to select all the "li" elements

for (let i = 0; i <listItems.length; i++){

listItems[i].addEventListener('mouseover', () => {
   listItems[i].textContent = listItems[i].textContent.toUpperCase();
                           });
listItems[i].addEventListener('mouseout', () => {
   listItems[i].textContent = listItems[i].textContent.toLowerCase();
                           });
}
Daniel Salvatori
Daniel Salvatori
2,658 Points
const listItems = document.getElementsByTagName('li')[0];

you want to select the whole list of li's to loop over, so remove the [0] at the end there