Simple javascript doesn't work on a tailwindcss basic setup

Question

I want to change an image on a click but it doesn't work:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/build/tailwind.css" />
    <title>Document</title>
</head>
<body class="bg-black">
    <h1 class="text-4xl font-bold text-center text-blue-500">Hello world!</h1>

    <lottie-player
      src="https://assets7.lottiefiles.com/private_files/lf30_vAtD7F.json"
      background="transparent"
      speed="1"
      style="width: 300px; height: 300px;"
      loop
      autoplay
      id="img"
      onclick="change()"
    >
    </lottie-player>
    <script src="../js/index.js"></script>
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>
</html>

function change() {
    document.getElementsByName('lottie-player').src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
}

I got this error, on the console:

score 3 · Accepted Answer · answered Apr 10 '20 at 09:18

3

Using onclick attribute is considered as a bad practice. Instead, use addEventListener().

And note that, getElementsByName() returns a collection of all elements in the document with the specified name.

document.getElementById('img').addEventListener('click', function() {
    this.src = 'https://assets7.lottiefiles.com/packages/lf20_uzCbcN.json';
});

answered Apr 10 '20 at 09:18

N'Bayramberdiyev

5,936
7
27
47

Thank you, i don't have the error message anymore but it doesn't work. – Nab Apr 10 '20 at 10:00
Why are you setting image source as a JSON? – N'Bayramberdiyev Apr 10 '20 at 10:23
you can try the same setup as me here: https://tailwindcss.com/course/setting-up-tailwind-and-postcss/ – Nab Apr 10 '20 at 13:22

Simple javascript doesn't work on a tailwindcss basic setup

1 Answers1