Javascriptで2つのOnclickイベントを使用してセルを交換するには

Question

javascriptで2つの別々のクリックイベントを使用して2つのセルを交換しようとしています。問題は、最初のクリックイベントによって格納された値が2回目のクリックイベントによって上書きされ、2番目のクリックイベントのために格納された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

クリックイベントリスナーを追加しています。最初のセルをクリックして発生させると、別のクリックイベントリスナーが追加されます。したがって、2番目のセルをクリックすると、最初のイベントリスナー（値を上書き）と、最初のイベントリスナー（最初のイベントリスナーの後に追加した2番目のリスナー）が発生します。 （テストしていない）、このような

何かが動作するはずです：：

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を設定しますあなたが唯一の機能だ単一リスナーがロジックを処理することができます登録する必要があり

セルがクリックされた後、2回目のクリックはもはやnullにならないので、else条件に入り、あなたは何でもできます。次に、firstCellをリセットして、相互作用全体を繰り返すことができます。