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

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,971 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