使用点击香草JS，在错误的节点上激活

Using on click vanilla JS, activating on wrong node

本文关键字：错误 节点 激活 香草 JS      更新时间：2023-09-26

我几乎完成了我正在学习Dom操作的这类游戏。基本上，游戏在左边产生5个图像，在右边产生4个图像，你点击奇数，然后在左边产生10个图像，右边产生9个图像（每次+5）。

我希望我的下一级函数在每次单击（左侧）的最后一个子节点时都能工作。它第一次工作，但在那之后，无论我是否单击了正确的节点，我的gameOver函数都会被调用，我不知道为什么。我试着删除了游戏over功能，但第二次我想让我的nextLevel运行（点击后），它没有。我是不是完全错了？感谢您的任何意见。留下了我的gameOver功能，这样你就可以看到我想用它做什么。

var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
var facesNeeded = 5;
var totalfFaces = 0;
var theBody = document.getElementsByTagName("body")[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(facesNeeded);
    //alert(totalfFaces);
    leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    document.getElementById("rightside").appendChild(leftSideImages);
    //alert("hi");
  }
}
makeFaces();
function delFaces(side) {
  while (side.firstChild) {
    side.removeChild(side.firstChild);
  }
}
theLeftSide.lastChild.onclick = function nextLevel(event) {
  event.stopPropagation();
  delFaces(theRightSide);
  delFaces(theLeftSide);
  totalfFaces = 0;
  facesNeeded += 5;
  //alert(facesNeeded);
  //alert(totalfFaces);
  makeFaces();
};
theBody.onclick = function gameOver() {
  alert("Game Over!");
  theBody.onclick = null;
  theLeftSide.lastChild.onclick = null;
};
<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightside {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
</head>
<body>
  <h1> Matching Game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="leftside"></div>
  <div id="rightside"></div>
  <script src="script3.js"></script>
</body>
</html>

您只需要在while之后将onclick移动到makeFaces内部，因此每次创建它们后都会添加：-

var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
var facesNeeded = 5;
var totalfFaces = 0;
var theBody = document.getElementsByTagName("body")[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(facesNeeded);
    //alert(totalfFaces);
    leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    document.getElementById("rightside").appendChild(leftSideImages);
    //alert("hi");
  }
  theLeftSide.lastChild.onclick = function nextLevel(event) {
     event.stopPropagation();
     delFaces(theRightSide);
     delFaces(theLeftSide);
     totalfFaces = 0;
     facesNeeded += 5;
     //alert(facesNeeded);
     //alert(totalfFaces);
     makeFaces();
   };
}
makeFaces();
function delFaces(side) {
  while (side.firstChild) {
    side.removeChild(side.firstChild);
  }
}
theBody.onclick = function gameOver() {
  alert("Game Over!");
  theBody.onclick = null;
  theLeftSide.lastChild.onclick = null;
};
<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      position: absolute;
    }
    div {
      position: absolute;
      width: 500px;
      height: 500px;
    }
    #rightside {
      left: 500px;
      border-left: 1px solid black;
    }
  </style>
</head>
<body>
  <h1> Matching Game</h1>
  <p>Click on the extra smiling face on the left</p>
  <div id="leftside"></div>
  <div id="rightside"></div>
  <script src="script3.js"></script>
</body>
</html>

相关文章：