どのように私の要素をイベントハンドラ関数に持ち込むことができますか？

Question

私はチック・タック・トゥ・ゲームを構築しています。

ボードがロードされると、ボードのすべてのボックスのイベントリスナーが作成されます。クリックを聞くとplacePiece関数が呼び出されます。

placePiece関数では、どのように右のボックスをターゲットにできますか？ 「これ」を使うことはできますか？

まず、ボックスが既に埋められているかどうかを確認する必要があります。そうでない場合は、currentPlayerがplayer1かplayer2であるかに応じて、それは斧に記入するか、またはここで0

は私のコードは次のとおりです。

// Add programming, so that when the player clicks the start button the start screen disappears, the board appears, and the game begins. 
function loadBoard() { 
    document.body.innerHTML = originalHTML; 

    player1 = new Player(player1); 
    player2 = new Player(player2); 

    var startingPlayerNum = Math.floor((Math.random() * 2) + 1); 
    console.log(startingPlayerNum); 

    if(startingPlayerNum === 1){ 
     player1.currentPlayer = true; 
     currentPlayer = player1; 
    } else { 
     player2.currentPlayer === true; 
     currentPlayer = player2 
    } 

    //Add clickhandlers for boxes 
    var a1 = document.getElementById('a1').addEventListener("click", placePiece); 
    var a2 = document.getElementById('a2').addEventListener("click", placePiece); 
    var a3 = document.getElementById('a3').addEventListener("click", placePiece); 
    var b1 = document.getElementById('b1').addEventListener("click", placePiece); 
    var b2 = document.getElementById('b2').addEventListener("click", placePiece); 
    var b3 = document.getElementById('b3').addEventListener("click", placePiece); 
    var c1 = document.getElementById('c1').addEventListener("click", placePiece); 
    var c2 = document.getElementById('c2').addEventListener("click", placePiece); 
    var c3 = document.getElementById('c3').addEventListener("click", placePiece); 

    currentPlayerFlag() 
}; 

//これらの規則に従ってゲームプレイを追加します。 は// XおよびO.

// The current player is indicated at the top of the page -- the box with the symbol O or X is highlighted for the current player. 
function currentPlayerFlag() { 
    if(currentPlayer === player1){ 
     document.getElementById('player1').classList.add("active"); 
     document.getElementById('player2').className = "players"; 
    } 
    if(currentPlayer === player2){ 
     document.getElementById('player2').classList.add("active"); 
     document.getElementById('player1').className = "players"; 
    } 
}; 


// When the current player mouses over an empty square on the board, it's symbol the X or O should appear on the square. 
    // You can do this using the x.svg or o.svg graphics (hint use JavaScript to set the background-image property for that box.) 
function placePiece() { 


    // Players can only click on empty squares. When the player clicks on an empty square, attach the class box-filled-1 (for O) or box-filled-2 (for X) to the square. 

    //How do I select the right tile? 
    if(//SPACE IS NOT EMPTY ?) { 
     if(currentPlayer === player1){ 

      player1.currentPlayer = false; 
      player2.currentPlayer = true; 
      currentPlayer = player2; 
     } 
     if(currentPlayer === player2){ 

      player2.currentPlayer = false; 
      player1.currentPlayer = true; 
      currentPlayer = player1; 
     } 

     gameState(); 
    } 
}; 

感謝の間に交互にプレイ！

Answer 1

はその

var a1 = document.getElementById('a1').addEventListener("click", function() {placePiece(this)}); 

のようなものを試してみて、それに応じてplacePieceを調整します

function placePiece(x) { 
    ...