如何将元素携带到事件处理程序函数中
how can I carry my element into the event handler function?
我正在制作一个井字游戏。
加载板时,我为板上的所有盒子创建事件侦听器。它将监听点击,然后调用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) {
...
相关文章:
- keyup事件处理程序更改焦点不适用于快速键入
- 提示使用服务器端事件处理程序激活JavaScript
- 将事件处理程序绑定到任何可能的事件
- 正在将事件处理程序添加到不存在的类
- 在循环中附加事件处理程序时出现浏览器性能问题
- 在同一个javascript事件处理程序中调用不同的函数
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 检查事件处理程序参数
- 实现延迟的jquery更改事件处理程序
- 如何使用Node.js在JavaScript模块文件之间使用事件处理程序
- 如何使jQuery的“bind”或“on”事件处理程序幂等
- 带有参数的Javascript事件处理程序
- Jquery事件处理程序仅适用于匿名函数
- 如何从另一个处理程序内部取消JavaScript事件处理程序函数的执行
- 如何在jQuery事件处理程序中存储和重用超时
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- 异步处理所有事件处理程序的方法
- jsplumb中的Click事件处理程序丢失“;这个“;对象
- 构造函数中的事件处理程序与构造函数外的事件处理函数的行为不同
- 如何在事件处理程序的回调中防止Default