Question

所以我有这个代码可行。

<head><title> Matching game asessment</title></head><style>img{position:absolute;
  }
  div{position:absolute;
  width:700px;
height:500px; } 
#divo{left: 650px;
  border-left:1px solid black;}
</style>
<body onload="generatefaces() ">
  <h1>Matching game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="divi"></div>
  <div id="divo"></div>
  <script>
    var src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
    var numberoffaces=5;
    var rightside=document.getElementById("divo");
          var leftside=document.getElementById("divi");
    
    
   function generatefaces(){     
      for (i=0; i<numberoffaces; i++){
      var img=document.createElement("img");
      img.src=src;
      img.width=50;
      img.height=50;
      var x=Math.floor(Math.random()*400)+"px";
      img.style.top=x;
      var y=Math.floor(Math.random()*600)+"px";
      img.style.left=y;

      leftside.appendChild(img);}
     
   var  leftsideimages=leftside.cloneNode(true);
leftside.removeChild(leftside.lastChild) ;
 rightside.appendChild(leftsideimages);
     return;
   }

我想扩展代码，使其在点击额外的笑脸时做一个事件。所以我添加了以下代码

leftside.lastChild.onclick= function next(event){  while (leftside.firstChild){leftside.removeChild(leftside.firstChild)};
                                    
     while (rightside.firstChild){rightside.removeChild(rightside.firstChild)};
    event.stopPropagation();
    numberoffaces += 5;
generatefaces();
    
}
     var thebody=document.getElementByTag(body)[0]; 
    thebody.onclick = function gameOver() {

    alert("Game Over!");



    thebody.onclick = null;

   leftside.lastChild.onclick = null;


};

最终取消了所有的笑脸。每次点击额外的笑脸时，我该怎么做才能让代码执行generatefaces（）函数？

javascript，单击一个子节点时运行一个函数

0 个答案: