我正在尝试在屏幕上的随机位置创建元素，但是遇到了一些麻烦。创建元素是可行的，但是当我尝试使它们具有随机位置时，什么也没有发生。我在这里先向您的帮助表示感谢。
这是我的代码：
var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}
function createObject() {
var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}
}html, body {
height: 100%;
width: 100%;
margin: 0;
}
#powerup {
background: red;
height: 10px;
width: 10px;
}<body>
<button onclick="createObject()">Create a Block</button>
</body>最佳答案
我made a CodePen用您的代码。
为了使这些元素的top和left属性生效，您需要在position: absolute;元素中添加#powerup。
#powerup {
background: red;
height: 10px;
width: 10px;
position: absolute;
}
另外，我不确定这是否是您想要的，但是您的JavaScript代码会在您单击按钮时为每个预先存在的
#powerup元素选择一个新的随机位置。