# Help with Uncaught TypeError in Console please

**URL:** <https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688>\
**Category:** Lottie in Web\
**Created:** [August 11, 2023, 6:58am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688 "2023-08-11T06:58:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Steve](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/steve/32/2971_2.png) [@Steve](https://forum.lottiefiles.com/u/Steve)\
**Post date:** [August 11, 2023, 6:58am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/1 "2023-08-11T06:58:27Z")

</div>

Hi guys

I have implemented a lottie animation within an HTML widget, on a WordPress site.

The animations play as intended, no issues there. However, in Console I receive the error:

```auto
Uncaught TypeError: this.player.addEventListener is not a function
 https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js:1

```

What am I doing wrong please? 🙂

My code for the animation

```auto
<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>
<script>
LottieInteractivity.create({
player:'#commerce',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
</script>

```

---

<div class="post-metadata">

**Author:** ![sam1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/sam1/32/2996_2.png) [@sam1](https://forum.lottiefiles.com/u/sam1)\
**Post date:** [August 18, 2023, 9:25am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/2 "2023-08-18T09:25:13Z")

</div>

Hey @Steve

Please try out these code snippets:

This snippet waits for the player to be ready before creating the interactivity object:

```auto
<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>

<script>
const player = document.getElementById("commerce");

player.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#commerce',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>

```

You can also try passing the player element straight to Interactivity:

```auto
<lottie-player id="commerce"
  src="https://mydomain.com/wp-content/uploads/2023/08/e-ecommerce.json" mode="bounce" 
  style="width:300px;">
</lottie-player>

<script>
const lottiePlayer = document.getElementById("commerce");

LottieInteractivity.create({
player: lottiePlayer,
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
</script>

```

Let me know how you get on with those 🍻

---

<div class="post-metadata">

**Author:** ![Steve](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/steve/32/2971_2.png) [@Steve](https://forum.lottiefiles.com/u/Steve)\
**Post date:** [August 28, 2023, 10:10am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/3 "2023-08-28T10:10:28Z")

</div>

Hi Sam,

Apologies for the late reply.

Thanks so much for the advice and assistance. I will try these code implementations this week!

---

<div class="post-metadata">

**Author:** ![Steve](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/steve/32/2971_2.png) [@Steve](https://forum.lottiefiles.com/u/Steve)\
**Post date:** [August 31, 2023, 8:01am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/4 "2023-08-31T08:01:06Z")

</div>

@sam1

Samuel, the code works like a charm! Thank you.

Just a side note, if anyone needs help with this - if you have more than one animation on a page, then variables defined with `const` cannot be **Redeclared**.

So the code on a single page will look like this:

```auto
<lottie-player id="mydesign1"
  src=https://domain.com/lottie/mydesign1.json mode="bounce" style="width:300px;">
</lottie-player>

<script>
const player = document.getElementById("mydesign1");
 
player.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#mydesign1',
mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>

<lottie-player id="mydesign2"
  src=https://mydomain.com/lottie/mydesign2.json mode="bounce" style="width:300px;">
</lottie-player>

<script>
var play2 = document.getElementById("mydesign2");

play2.addEventListener("ready", () => {
LottieInteractivity.create({
player:'#mydesign2',
 mode:"scroll",
    actions: [
        {
        visibility:[0.2, 1.0],
        type: "play"
        }
    ]
});
});
</script>

```

---

<div class="post-metadata">

**Author:** ![sam1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/sam1/32/2996_2.png) [@sam1](https://forum.lottiefiles.com/u/sam1)\
**Post date:** [August 31, 2023, 8:14am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/5 "2023-08-31T08:14:53Z")

</div>

@Steve Love to hear it 🎉

---

<div class="post-metadata">

**Author:** ![Loic\_Panchoo](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/loic_panchoo/32/3830_2.png) [@Loic\_Panchoo](https://forum.lottiefiles.com/u/Loic_Panchoo)\
**Post date:** [July 16, 2024, 11:18am UTC](https://forum.lottiefiles.com/t/help-with-uncaught-typeerror-in-console-please/4688/6 "2024-07-16T11:18:15Z")

</div>

Hello,

I had the same problem.  
The new code fixed it but my animation won’t play. Do you know why ?

```auto
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script> 

<dotlottie-player id="eyez" src="https://lousitasgallery.com/wp-content/uploads/2024/07/two-eyes-comp.json" style="width: 100%;" speed="1"></dotlottie-player>
<script>
const lottiePlayer = document.getElementById("eyez");

LottieInteractivity.create({
player: lottiePlayer,
 mode:"scroll",
    actions: [
      {
        visibility: [0,1],
        type: 'seek',
        frames: [0, 181],
      },
    ]
});
</script>

```

Website : [https://lousitasgallery.com/](https://lousitasgallery.com/)  
I’m working on Wordpress with Divi.

Thank you,