JavaScript JavaScript and the DOM Responding to User Interaction The Event Object

Isaac Hughes
Isaac Hughes
3,711 Points

I do not know what is happening with the code, it is not working

I looked over the code and checked it a bunch of times but i cannot get it to work the error i get in the console is "SCRIPT438: SCRIPT438: Object doesn't support property or method 'addEventListener' "

https://w.trhou.se/kp22mj0764

const toggleList= document.getElementById('toggleList');
const listDiv= document.getElementsByClassName('list');
const input=document.querySelector('input');
const p=document.querySelector('p.description');



listDiv.addEventListener('mouseover',(event) =>{
  if(event.target.tagName =='LI') {
    event.target.textContent =  event.target.textContent.toUpperCase();
  }
});

listDiv.addEventListener('mouseout',(event) => {
  if(event.target.tagName =='LI'){
   event.target.textContent =  event.target.textContent.toLowerCase();
  } 
});

1 Answer

I made the following change:

const listDiv= document.getElementsByClassName('list')[0]

note the index at the end. getElementsByClassName retrieves a collection of elements so the code above references the first item.

Isaac Hughes
Isaac Hughes
3,711 Points

can't believe I missed that, it works now thanks :)