Question

我试图在javascript中使用两个单独的点击事件来交换两个单元格。问题是第一次单击事件存储的值被第二次单击事件覆盖，控制台向我显示为第二次单击事件存储的StringAdjacent值已被覆盖。这是我的代码：

//Listen to a Set of Click Events to Swap Cells
document.getElementById('board').addEventListener("click", function(e){
  click1ID = event.target.id;
  click1Class = event.target.className;
  stringAdjacency1 = click1ID.replace('cell','')
  console.log(stringAdjacency1);
  document.getElementById('board').addEventListener("click", function(e){
    click2ID = event.target.id;
    click2Class = event.target.className;
    stringAdjacency2 = click2ID.replace('cell','')
    console.log(stringAdjacency2);
  });
  console.log(stringAdjacency1, stringAdjacency2);
});

function swapIds(click1ID, click1Class, click2ID, click2Class) {
  //Are cells adjacent? If so, swap Cells
  //Check the winning combinations to see if there's a new match;
  //Swap cells;
});

请帮忙！谢谢。

Answer 1

您正在添加一个单击事件侦听器，通过单击第一个单元格触发该侦听器会导致添加另一个单击事件侦听器。因此，当您单击第二个单元格时，它将触发第一个事件侦听器（覆盖该值），以及您在第一个单元格之后添加的第二个侦听器。

您只需要注册一个函数可以处理逻辑的侦听器：

这样的事情应该有用（没有测试）：

var firstCell = null;
document.getElementById('board').addEventListener("click", function(e){
  if(!firstCell) {
    firstCell = e.target;
  } else {
     var secondCell = e.target;
     // do whatever logic you want

     // reset first cell
     firstCell = null;
  }
});

这会将firstCell设置为第一个单击的单元格，然后第二次单击它将不再为null，因此它将进入else条件，您可以执行任何操作。然后，您将重置firstCell，以便重复整个互动。

如何在Javascript中使用两个Onclick事件交换单元格

1 个答案: