0

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>
Jo Mourad
  • 27
  • 1
  • 8
  • 4
    What about `find(...)[0].play()`? Otherwise you're trying to fire `play` on a jquery object. – evolutionxbox Mar 24 '22 at 15:47
  • It's `lottiePlayer[0].play()`. Not sure what you're doing with `$` - is that jQuery? – Bergi Mar 24 '22 at 15:48
  • Yes i'm using jQuery... and i shouldn't i guess. i've been using jquery and javascript for a while now, but only trying to actually understand it NOW lol – Jo Mourad Mar 24 '22 at 15:50
  • The worst is when you start mixing jQuery and `getElementsByTagName` calls. – trincot Mar 24 '22 at 15:51
  • 1
    For clarity, `this` isn't the same as `$(this)`. – isherwood Mar 24 '22 at 15:52
  • @evolutionxbox can you please explain to me why this works? What does the [0] mean? (Learning the right way this time, not trying to just copy paste code) – Jo Mourad Mar 24 '22 at 15:52
  • 1
    See the answers on the linked duplicate. It's all explained there. – isherwood Mar 24 '22 at 15:52
  • @trincot are you saying i should stick with $("tag") or drop the jQuery? I'm trying to learn the correct way, but already use so much jQuery.. i know i should've learnt the other way around... – Jo Mourad Mar 24 '22 at 15:56
  • @evolutionxbox THAT'S the correct answer! Thanks a lot... was looking for the solution in other posts, but didn't know what to look for. I'm going to read into that answer to really understand! – Jo Mourad Mar 24 '22 at 16:02
  • @isherwood i,ve read the other answer, and don't understand the [0]. Is there a video or documentation that would explain a bit more? I just really want to understand WHY i need to call [0] and what is that. when i console.log(lottiePlayer), it gives me the 8 players, but the [0]is always the first one, reglardless of which i hover. So i think i just don't understand what [0] stands for? – Jo Mourad Mar 24 '22 at 16:39
  • See the last sentence in the [accepted answer](https://stackoverflow.com/a/4647069/1264804). `get(0)` and `[0]` do essentially the same thing. – isherwood Mar 24 '22 at 16:42
  • 1
    @isherwood yes, i just understood it all now. See, i didn't even understand the get(0). So if i understand: By using [0], i select the actual DOM element inside the jQuery object, and not the jQuery object itself. Because it's on the div (DOM element) i need to play(); So i needed to go one step deeper. right? – Jo Mourad Mar 24 '22 at 16:47

1 Answers1

0

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;
});
connexo
  • 53,704
  • 14
  • 91
  • 128