Question

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

    <!DOCTYPE html>
    <html>
    <head>
    	<title>Web Practice 2</title>
    	<style type="text/css">
    		img {
    			position: absolute;
    		}
    		div {
    			width: 500px;
    			height: 500px;
    			position: absolute;
    		}
    		#rightSide {
    			left: 500px;
    			border-left: 1px solid black;
    		}
    	</style>
    </head>
    <body>
    	<div id="leftSide"></div>
    	<div id="rightSide"></div>
    	<script type="text/javascript">
    		var numberOfFaces = 5;
    		var theLeftSide = document.getElementById("leftSide");
    
    		function generate() {
    			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();
    
    	</script>
    </body>
    </html>

Answer 1

实际上是五个图像，但它只显示有一个，因为您的位置随机化不正常（换句话说，图像都堆叠在彼此之上）。 CSS top和left属性需要单位，因此您应该将"px"附加到两者。

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

最后，您可能会很高兴知道您可以使用快捷方式img.src = ...而不是在脚本中调用img.setAttribute("src", ...)。

<小时/>

演示片段：

<!DOCTYPE html>
<html>

<head>
  <title>Web Practice 2</title>
  <style type="text/css">
    img {
      position: absolute;
    }
    
    div {
      width: 500px;
      height: 500px;
      position: absolute;
    }
    
    #rightSide {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
</head>

<body>
  <div id="leftSide"></div>
  <div id="rightSide"></div>
  <script type="text/javascript">
    var numberOfFaces = 5;
    var theLeftSide = document.getElementById("leftSide");

    function generate() {
      for (i = 0; i < numberOfFaces; i++) {
        var img = document.createElement("img");
        img.src = "smile.png";
        img.alt = "Smile!"
        img.style.top = Math.floor(Math.random() * 450) + "px";
        img.style.left = Math.floor(Math.random() * 450) + "px";
        theLeftSide.appendChild(img);
      }
    }

    generate();
  </script>
</body>

</html>

Answer 2

您的代码中存在两个问题：

您需要将一个函数引用分配给window.onload。当您使用generate()时，您正在调用该函数，因为它不会return您实际执行的任何操作window.onload = undefined。
您在DOM准备好之前分配theLeftSide，因此它始终为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;

请参阅Fiddle

Answer 3

您忘记在坐标中添加度量单位（像素为“px”）。如果未指定单位，则属性值无效。

此外，您立即呼叫generate，而不是参考该功能。

我已修改您的尺寸以更好地适应堆栈溢出代码段空间，并使用更正确的.addEventListener方法来设置load事件处理程序。另外，我为div元素添加了临时背景颜色，以便更好地查看leftSide元素中图片的布局。

    		var numberOfFaces = 5;
    		var theLeftSide = document.getElementById("leftSide");
    
    		function generate() {
    			for (i = 0; i < numberOfFaces; i++) {
    				var img = document.createElement("img");
    				img.setAttribute("src", "smile.png");
    				img.style.top = Math.floor(Math.random()*250) + "px";
    				img.style.left = Math.floor(Math.random()*250) + "px";
    				theLeftSide.appendChild(img);
    			}
    		}
    
    		window.addEventListener("load", generate);

    		img {
    			position: absolute;
    		}
    		div {
    			width: 300px;
    			height: 300px;
    			position: absolute;
          background-color:#ff0;
    		}
    		#rightSide {
    			left: 350px;
    			border-left: 1px solid black;
    		}

    	<div id="leftSide"></div>
    	<div id="rightSide"></div>

Answer 4

我已经解决了我的问题，我刚刚将<!DOCTYPE html>更改为<html>并且它有效，但我不确定为什么。

在div上附加多个图像

4 个答案:

演示片段：