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

【问题标题】：Simple javascript doesn't work on a tailwindcss basic setup简单的 javascript 不适用于 tailwindcss 基本设置
【发布时间】：2020-07-22 23:48:56
【问题描述】：

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

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

我在控制台上收到了这个错误：

【问题讨论】：

标签： javascript tailwind-css

【解决方案1】：

使用onclick 属性被视为a bad practice。请改用addEventListener()。

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

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

【讨论】：

谢谢，我没有错误信息了，但它不起作用。
为什么要将图像源设置为 JSON？
你可以在这里尝试和我一样的设置：tailwindcss.com/course/setting-up-tailwind-and-postcss