Accessing object method inside parent? [duplicate]

Question

While solving a problem, i ran into another one which is not of the same nature, so here it goes!

Why is it that the first one works, but i can't seem to access the play() on the other examples.

The reason i want to do this is that my hover should be on the entire .box and not just the svg element...

Please help, i've been scratching my head for a couple of days now.. i'm sure it's a beginner's mistake.

Thanks!

// works 

var lottiePlayer = document.getElementsByTagName("lottie-player");

$(lottiePlayer).on('mouseover', function(event) {
    this.play();
});

// doesn't work

$(this).find(lottiePlayer).play();

// doesn't work

$(this).find('#container-horloge').play();

// doesn't work

var anim = $(this).find(lottiePlayer);
    anim.play();

<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>
<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>
<div class="box">
        <lottie-player src="/wp-content/uploads/svg/SOURCE_HERE.json"></lottie-player>
        <p>Lorem ipsum</p>
</div>

Answer 1

Using Vanilla JS:

document
  .querySelectorAll('lottie-player')
  .forEach(player => player.onmouseover = () => player.play());

Using a single delegate listener:

document.body.addEventListener('mouseover', function (event) {
  if (this.matches('lottie-player') this.play;
});