Javascript 在div上追加多个图像

我尝试在一个div上添加五次相同的图像，但当我在Chrome或任何浏览器中打开我的网页时，它只显示一个smiley.png图像，而它应该在左侧div的不同坐标上显示五个smiley.png。我不确定下面的代码有什么问题：

网络实践2
img{
位置：绝对位置；
}
div{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#右侧{
左：500px；
左边框：1px纯黑；
}
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
函数生成（）{
对于（i=0；i

我已经解决了我的问题，我刚把

改成

，但我不知道为什么。

我已经解决了我的问题，我刚把

改成

，但我不知道为什么。

实际上有五幅图像，但它看起来只有一个，因为你的位置随机化工作不正常（换句话说，图像都叠在一起）。CSS

top

和

left

属性需要单位，因此您应该将

“px”

附加到两者

另外，请注意，由于在脚本开始执行时已经加载了必要的DOM，因此根本不需要使用

window.onload

最后，您可能很高兴知道，您可以使用快捷方式

img.src=…

，而不是在脚本中调用

img.setAttribute（“src”，…）

。

---

演示片段：

网络实践2
img{
位置：绝对位置；
}
div{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#右侧{
左：500px；
左边框：1px纯黑；
}
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
函数生成（）{
对于（i=0；i

实际上有五个图像，但看起来只有一个，因为您的位置随机化工作不正常（换句话说，所有图像都叠在一起）。CSS

top

和

left

属性需要单位，因此您应该将

“px”

附加到两者

另外，请注意，由于在脚本开始执行时已经加载了必要的DOM，因此根本不需要使用

window.onload

最后，您可能很高兴知道，您可以使用快捷方式

img.src=…

，而不是在脚本中调用

img.setAttribute（“src”，…）

。

---

演示片段：

网络实践2
img{
位置：绝对位置；
}
div{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#右侧{
左：500px；
左边框：1px纯黑；
}
var numberOfFaces=5；
var theLeftSide=document.getElementById（“leftSide”）；
函数生成（）{
对于（i=0；i

您的代码中有两个问题：

您需要将函数引用分配给

window.onload

。当您使用

generate（）

时，您正在调用函数，因为它不会

返回您正在有效执行的任何操作
window.onload=undefined

在DOM准备就绪之前分配

左侧

，因此它将始终为

null

，并将引发

appendChild（）

调用

请尝试以下方法：

  var numberOfFaces = 5;

  function generate() {
    var theLeftSide = document.getElementById("leftSide");

    for (i = 0; i < numberOfFaces; i++) {
      var img = document.createElement("img");
      img.setAttribute("src", "smile.png");
      img.style.top = Math.floor(Math.random() * 450);
      img.style.left = Math.floor(Math.random() * 450);
      theLeftSide.appendChild(img);
    }
  }

  window.onload = generate;

var numberOfFaces=5；
函数生成（）{
var theLeftSide=document.getElementById（“leftSide”）；
对于（i=0；i

---

请参见代码中有两个问题：

您需要将函数引用分配给

window.onload

。当您使用

generate（）

时，您正在调用函数，因为它不会

返回您正在有效执行的任何操作
window.onload=undefined

在DOM准备就绪之前分配

左侧

，因此它将始终为

null

，并将引发

appendChild（）

调用

请尝试以下方法：

  var numberOfFaces = 5;

  function generate() {
    var theLeftSide = document.getElementById("leftSide");

    for (i = 0; i < numberOfFaces; i++) {
      var img = document.createElement("img");
      img.setAttribute("src", "smile.png");
      img.style.top = Math.floor(Math.random() * 450);
      img.style.left = Math.floor(Math.random() * 450);
      theLeftSide.appendChild(img);
    }
  }

  window.onload = generate;

var numberOfFaces=5；
函数生成（）{
var theLeftSide=document.getElementById（“leftSide”）；
对于（i=0；i