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

How do I swap cells using two Onclick Events in Javascript

本文关键字：两个 Onclick 事件 单元格 交换 Javascript      更新时间：2023-09-26

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

//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;
});

请帮忙!谢谢你。

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

你只需要注册一个监听器，它的函数可以处理逻辑:

像这样的东西应该可以工作(没有测试):

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为第一个点击单元格，然后第二次点击它将不再为空，所以它将进入else条件，你可以做任何你想做的。然后您将重置firstCell，以便整个交互可以重复。

相关文章：