Простая javascript не работает при попутном ветре css basi c - PullRequest
Новая
       9

Простая javascript не работает при попутном ветре css basi c

0 голосов
/ 10 апреля 2020

Я хочу изменить изображение одним кликом, но оно не работает: 

<!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';
}

Я получил эту ошибку на консоли:

enter image description here

1 Ответ

3 голосов
/ 10 апреля 2020

Использование атрибута onclick считается плохой практикой . Вместо этого используйте addEventListener().

И обратите внимание, что getElementsByName() возвращает коллекцию всех элементов в документе с указанным именем. 

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