我正在制作一个井字游戏，其中有一系列 9 个按钮。我根据变量 isX 的 bool 值将背景图像更改为 X 或 O。
我有一个 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;
}
}
}
最佳答案
您的代码中存在一些语法和语义错误——可能比我发现的更多，但它处于工作状态。
- 您只关闭了
prepareBoard中嵌套的for循环中的一个大括号。这导致clickHandler被定义在prepareBoard而不是window上。 - 是
addEventListener，不是addEventHandler。
关于无法识别 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16205996/