简单的javascript在tailwindcss基本设置上不起作用

时间：2020-04-10 08:38:41

标签： javascript tailwind-css

我想单击更改图像，但不起作用：

<!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 个答案:

答案 0 :(得分：3)

使用onclick属性被视为a bad practice。而是使用addEventListener()。

请注意，getElementsByName()返回具有指定名称的文档中所有元素的集合。

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