如何将元素携带到事件处理程序函数中

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

本文关键字:事件处理 程序 函数 元素      更新时间:2023-09-26

我正在制作一个井字游戏。

加载板时,我为板上的所有盒子创建事件侦听器。它将监听点击,然后调用placepece函数。

在placepece函数中,如何定位正确的框?我能用"this"吗?

我首先需要检查这个框是否已经填满了。如果不是,则根据currentPlayer是player1还是player2,它将填充x或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();
    }
};

谢谢!

试试这样

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

并相应地调整placePiece:

function placePiece(x) {
    ...