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

shirshah sahel
shirshah sahel
10,034 Points

for loop

I have typed the code below in my workspace, it is a for loop in order to uppercase and lowercase the listitems but I dont know what I am missing and it is not working. any ideas will be appreciated.

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

}); }

2 Answers

Ezra Siton
Ezra Siton
12,623 Points

Hi. First Markdown your code in the future.

Next. You cannot loop throw listItems[i] without any assignment for this var. Give you this error

JavaScript error: Uncaught ReferenceError: listItems is not defined on line 4

/* Dont forget to assign  HTMLCollection value to listItems before you trying to loop throw this var 
var 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();

}); }

https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

shirshah sahel
shirshah sahel
10,034 Points

Thank you for your time Ezra Siton. I will markdown my code next time to be more readable.