Javascript 我无法将div放置在随机位置

我试图随机放置一个div，但得到了一个类型错误。它说元素是未定义的，但我想我是用第1行的const行来定义它的。在我的CSS文件中，div的位置是绝对的，并且有一个背景图像集。我可以在console.log中告诉您，我正在获得所需的随机数。我只是在把这些坐标附加到div上有点麻烦

const animal = document.querySelectorAll('.animal');

function getRandomPos(animal) {
    var x = screen.width;
    var y = screen.height;
    var randomX = Math.floor(Math.random() * x);
    var randomY = Math.floor(Math.random() * y);
    console.log(randomX, randomY);

    let rect = animal.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);

    animal.style.left = randomX;
    animal.style.top = randomY;
}

---

注释中已经解决了一个主要问题—querySelector将返回HTMLCollection而不是单个元素，因此需要querySelector。 此外，您还需要在设置元素样式的行中添加px单位，请参见下文

更新

发问者提到有多个随机移动的元素，所以我添加了一个示例，其中包括如何使用id作为setRandomPos函数的参数来实现这一点

函数setRandomPostTarget{ 常量元素=document.getElementByIdtarget； //var x=屏幕宽度； var x=400；//示例中只有较小的数字 //变量y=屏幕高度； 变量y=200； var randomX=Math.floorMath.random*x； var randomY=Math.floorMath.random*y； //记住为单元添加px element.style.left=randomX+'px'； element.style.top=randomY+'px'； } randMove先生{ 位置：固定； } 钮扣{ 字体大小：20px； z指数：1； 位置：相对位置； } 移动动物

---

当您使用QuerySelector时，这将导致animal成为HTMLCollection，而不是单个元素。HTMLCollection没有样式属性，例如。。。如果只有一个元素，请尝试使用querySelector而不是将querySelectorAll更改为querySelector。如果不止一行，那么您需要遍历每一行……您确定定义动物的第一行是在解析HTML之后执行的吗？如果在页面加载的早期读取或根本不读取，常量将被取消定义。我使用querySelectorAll，因为最终会有几个div执行相同的操作。我认为，作为一名新开发人员，对我来说，一件挑战是决定将操作放在何处。在这里，你把JS放在地图上。我还看到/使用了带有背景图像集的div。仍然存在在画布元素上绘制并移动这些项目的可能性。如何确定项目的最佳设置？例如，在这里，我最终想要设置一些东西，让我在同一时间对许多项目进行相同的操作。@user2900299这就是创造性决策和个人偏好的作用所在。你会发现通常有很多很多不同的方法来解决同一个问题。当你刚开始的时候，只需要使用对你来说最有意义的代码，你可以担心以后会变得“优雅”。要使此功能适用于多个元素，您需要为setRandomPos函数提供一个参数-SetRandomPostTargetId，然后从按钮或其他交互元素调用该函数，提供参数onclick-如果您希望我添加该示例，请让我知道。好的。我很好奇你会怎么做。@user2900299添加了它-希望这是有意义的。基本上，只需为JS函数提供想要移动的元素的ID。然后使用document.getElementById以该元素为目标并移动它。