如何在javascript中的tictactoe游戏中检索按钮ID

var table = [];
    var blocks = 9;
    var player1, player2, boardId;
    var chance = 1;
    var buttonKey;
    winningCombinations = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9],
    [1, 5, 9], [3, 5, 7]];
    $(document).ready(function () {
        buttonId = 1;
        for (var index = 0; index < blocks; index++) {
            buttonKey = document.createElement("button");
            if ((index == 3 || index == 6)) {
                lineBreak = document.createElement('br');
                document.body.appendChild(lineBreak);
            }
            buttonKey.innerHTML = " + ";
            buttonKey.id = buttonId;
            buttonKey.setAttribute("value", buttonId);
            buttonKey.setAttribute("text", buttonId);
            buttonKey.style.fontFamily = "Times New Roman";
            buttonKey.style.backgroundSize = "50px";
            buttonKey.style.backgroundColor = "#C0C0C0";
            buttonKey.style.fontSize = "25px";
            buttonKey.style.marginBottom = "10px";
            buttonKey.style.marginLeft = "5px";
            buttonKey.style.marginRight = "5px";
            document.body.appendChild(buttonKey);
            buttonId++;
            buttonKey.addEventListener("click", function (event) {
                selectMark(event, event.srcElement);
                checkIsWinner(event, event.srcElement);
            });
        }
    });
    function selectMark(currentObject, currentType) {
        if (chance % 2 != 0) {
            player1 = 'x';
            document.getElementById(currentType.id).innerHTML = player1;
            document.getElementById(currentType.id).style.backgroundColor = '#238EE1';
            console.log("player 1 -x")
        }
        else {
            player2 = 'o';
            document.getElementById(currentType.id).innerHTML = player2;
            document.getElementById(currentType.id).style.backgroundColor = '#FF1010';
            console.log("player2 - o")
        }
        chance++;
    }
    function checkIsWinner(currentObject, currentType) {
        winningCombinations = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9],
        [1, 5, 9], [3, 5, 7]];
        var element = document.getElementById(currentType.id);
        var tie = 0;
        for (var column = 0; column < 8; column++) {
            answer1 = winningCombinations[0][column];
            answer2 = winningCombinations[1][column];
            answer3 = winningCombinations[2][column];
            if (element.innerHTML == 'x' &&
                (id == answer1 && id == answer2
                    && id == answer3)) {
                console.log("player 1 is the Winner");
                return false;
            }
            else if (element.innerHTML == 'o' &&
                (id == answer1 && id == answer2
                    && id == answer3)) {
                console.log("player 2 is the Winner");
                return false;
            }
            else {
                tie++;
                if (tie == 8) {
                    console.log("Its a Tie");
                }
                console.log(element.id);
            }
        }
    }

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
</style>
</head>
 <body>
<div id="displaytable"></div>
 </body>
 </html>

我正在创建一个 tictactoe 游戏，其中我有 9 个按钮。我已经为每个按钮提供了一个id，并为按钮添加了一个addEventListener。现在我想检查获胜者，所以我需要检索按钮 ID 并找出组合是否有效。我试图使用各种符号进行检索，它不起作用，在此代码中，我已经发布了它 buttonKey.id 但它仍然不起作用。如何检索它。请帮忙。

您只需检查属性 ID

在您的函数中：

buttonKey.addEventListener("click", function (event) {
            selectMark(event, event.srcElement);
            checkIsWinner(event, event.srcElement);
            var elem = event.target;
            var id = elem.id;
            //now you do what you want to do with it...
        });

您可以声明id其他人来打开范围......

相关内容

最新更新

热门标签：