Question

我正在制作一个Tic-tac-toe游戏，其中我有一系列9个按钮。我根据变量X的布尔值将背景图像更改为O或isX。

我有div，其ID为stage，其中包含班级square的所有按钮。我在stage上添加了一个监听器，并将event参数传递给它。但是，无法识别函数clickHandler。 Chrome说：

Uncaught ReferenceError: clickHandler is not defined 2Players.html:38
(anonymous function)

HTML：

<body>
    <div id="stage">

    </div>
</body>

CSS：

#stage{
    width: 400px;
    height: 400px;
    padding: 0px;
    position: relative;
}
.square{
    width: 64px;
    height: 64px;
    background-color: gray;
    position: absolute;
}

JavaScript：

        const ROWS = 3;
        const COLS = 3;
        const GAP = 10;
        const SIZE = 64;
        var stage = document.querySelector("#stage");
        var lotOfButtons = [];

        var winningPatterns = ["123","159","147",
                               "258","357","369",
                               "456","789"];
        var isX = true;
        var player1Pattern = "";
        var player2Pattern = "";

        stage.addEventHandler("click",clickHandler,false);
        prepareBoard();

        function prepareBoard(){
            for(var row = 0;row<ROWS;row++){
            for(var col = 0;col < COLS;col++){
                var square = document.createElement("button");
                square.setAttribute("class","square");
                stage.appendChild(square);
                lotOfButtons.push(square);
                square.style.left = col * (SIZE+GAP) + "px";
                square.style.top = row * (SIZE+GAP) + "px";
            }
        }
        function clickHandler(event){
            if(isX===true){
                event.target.style.backgroundImage = "url(../img/X.PNG)";
                isX = false;
            }else{
                event.target.style.backgroundImage = "url(../img/O.PNG)";
                isX = true;
            }
        }
  }

Answer 1

你在代码中有一些语法和语义错误 - 可能比我捕获的更多，但它处于工作状态。

您只关闭for中嵌套prepareBoard循环中的一个大括号。这导致clickHandler在 prepareBoard内而不是在window上定义。

它是addEventListener，而不是addEventHandler。

http://jsfiddle.net/4pgQ8/

JavaScript功能无法识别

1 个答案: