Question

我不确定我做错了什么，但iv创建了5个放在左边div中随机位置的图像，我想复制所有5个 - 第一个孩子并将它们放在右侧。因此，左边有5张图片，右边有4张图片。我调试了我的if并且它确实运行了，但我无法弄清楚我的代码有什么问题？为什么不在右侧打印图像？任何帮助表示赞赏谢谢

var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;

function makeFaces() {
	while(facesNeeded != totalfFaces) {		
		smiley = document.createElement("img");
		smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
		smiley.style.top = Math.random() * 401 + "px";
		smiley.style.left = Math.random() * 401 + "px";	
		document.getElementById("leftside").appendChild(smiley);
		totalfFaces++;
		// alert(totalfFaces); used to debug
	} 
	if (facesNeeded == totalfFaces){
		alert("hi");
		leftSideImages = theLeftSide.cloneNode(true);
		leftSideImages.removeChild(leftSideImages.childNode[0]);
		document.getElementById("rightside").appendChild(leftSideImages);
        //alert("hi");
	}
}

<!DOCTYPE html>
<html>
  <head>
  <style>
  img{
  	position: absolute;
  }
  div {
  	position: absolute;
  	width:500px;
  	height:500px;
  }
  #rightside { 
 	left: 500px; 
    border-left: 1px solid black;
   }
  </style>
  <script src="script3.js"></script>      
  </head>
  <body onload="makeFaces()"> 
   <h1> Matching Game</h1>
   <p> Click on the extra smiling face on the left</p>       
      <div id="leftside"></div>
      <div id="rightside"></div>     
  </body>
</html>

Answer 1

你在这一行有一个错字：

leftSideImages.removeChild(leftSideImages.childNode[0]);

它应该是：

leftSideImages.removeChild(leftSideImages.childNodes[0]);

完整代码：

＆＃13;

var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;

function makeFaces() {
	while(facesNeeded != totalfFaces) {		
		smiley = document.createElement("img");
		smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
		smiley.style.top = Math.random() * 401 + "px";
		smiley.style.left = Math.random() * 401 + "px";	
		document.getElementById("leftside").appendChild(smiley);
		totalfFaces++;
		// alert(totalfFaces); used to debug
	} 
	if (facesNeeded == totalfFaces){
		alert("hi");
		leftSideImages = theLeftSide.cloneNode(true);
		leftSideImages.removeChild(leftSideImages.childNodes[0]);
		document.getElementById("rightside").appendChild(leftSideImages);
        //alert("hi");
	}
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
  <style>
  img{
  	position: absolute;
  }
  div {
  	position: absolute;
  	width:500px;
  	height:500px;
  }
  #rightside { 
 	left: 500px; 
    border-left: 1px solid black;
   }
  </style>
  <script src="script3.js"></script>      
  </head>
  <body onload="makeFaces()"> 
   <h1> Matching Game</h1>
   <p> Click on the extra smiling face on the left</p>       
      <div id="leftside"></div>
      <div id="rightside"></div>     
  </body>
</html>

＆＃13;

如何将现有div中的节点复制到另一个div Javascript中

1 个答案: