0

I keep getting the error

slides.addEventListener is not a function.

How come?

Here is the code:

const slides = document.querySelectorAll('.home__slide');

slides.addEventListener('mouseenter', e => {
  clearInterval(slideInterval);
});
VLAZ
  • 26,331
  • 9
  • 49
  • 67
  • Because whatever "slides" is doesn't have an "addEventListener" function? – Dave Newton Jun 23 '20 at 12:47
  • You're essentially asking the wrong question. You're getting that error because, well, `slides.addEventListener` is not a function. The question you *should* be asking to yourself first is why exactly do you think it *should be* a function? – David Jun 23 '20 at 12:47
  • 1
    `document.querySelectorAll()` returns a HTMLCollection. You need to iterate through individual nodes in the collection to attach the event listener. – Terry Jun 23 '20 at 12:48
  • I might have just looked at the docs for "querySelectorAll", or searched for "querySelectorAll addEventListener". – Dave Newton Jun 23 '20 at 12:49
  • Use document.querySelector, or add an index like this: slides[0].addEventListener. – yochanan sheinberger Jun 23 '20 at 12:50
  • `document.querySelectorAll` returns a NodeList, not a single item, so it doesn't have an `.addEventListener`. You can isntead use `slides.forEach(slice => slide.addEventListener('mouseenter', e => { clearInterval(slideInterval); });` to add an even listener to each, or if there is a single element you expect, then just use `const slides = document.querySelector('.home__slide');` – VLAZ Jun 23 '20 at 12:50

0 Answers0