简单 javascript 不适用于 tailwindcss 基本设置

Question

我想通过点击更改图像，但它不起作用：

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

我在控制台上收到此错误：

Answer 1

使用 onclick 属性被视为 a bad practice. Instead, use addEventListener()。

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

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

简单 javascript 不适用于 tailwindcss 基本设置

Simple javascript doesn't work on a tailwindcss basic setup

javascript

tailwind-css