how can I carry my element into the event handler function?

Question

I am building a tic-tac-toe game.

When the board is loaded, I create event listeners for all of the board's boxes. It will listen to a click, it will then call the placePiece function.

In the placePiece function, how can I target the right box? Can I use 'this'?

I first need to check if the box has already been filled or not. If it isn't, then depending on whether currentPlayer is player1 or player2, it will either fill in ax or 0.

Here is my code:

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

// Add the game play following these rules. // Play alternates between X and 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();
    }
};

Thanks!

Answer 1

Try something like that

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

and adjust placePiece accordingly:

function placePiece(x) {
    ...