使用事件单击处理程序保存两组坐标

Question

我做了什么：所以我在Java Script中创建了一个国际象棋游戏，我有一个8 x 8的棋盘（html表），棋盘上有棋子。我目前已经设置了一些Click处理程序来识别用户点击了哪个板位（每个td都有自己的id 0-63，使用this.cellIndex和.rowIndex我可以得到坐标）。

问题：到目前为止，我的代码正在运行，但我正在尝试找出如何保存两个单独的用户输入（一个选择当前片段的坐标，第二个用户想要的东西去哪里）。我的想法是将变量cellContent作为参数从“selectPiece（）”传递给“movePiece（）”，这样我就可以将两个变量放在同一个函数中，但我似乎无法让它工作。有什么建议或其他想法吗？

我的代码：

function addClickHandlers() {
        var cells = document.getElementsByTagName("td");
        for (var i = 0; i< cells.length; i++) {
        cells[i].onclick = function selectPiece() {
            var coordinates = document.getElementById("coordinates");
            var col = this.cellIndex
            var row = this.parentNode.rowIndex;
            var thisCell = this.id;
            var cellContent = document.getElementById(thisCell).innerHTML;
            document.getElementById(this.id).style.backgroundColor = "blue";
            var cells = document.getElementsByTagName("td");
            for (var i = 0; i< cells.length; i++) {
                cells[i].onclick = function movePiece() {
                    var coordinates = document.getElementById("coordinates");
                    var col = this.cellIndex
                    console.log(this.cellIndex);
                    var row = this.parentNode.rowIndex;
                    console.log(this.id);
                    var thisCell = this.id;
                    var cellContent = document.getElementById(thisCell).innerHTML;
                    console.log(cellContent);
                    document.getElementById(this.id).style.backgroundColor = "red";
                    };
            }
            var postCoordinates = document.createTextNode("You clicked on coordinates: (" + row + "," + col + ").");
            coordinates.appendChild(postCoordinates);
            var br = document.createElement("br");
            coordinates.appendChild(br);
        };
    }
}

段

function showBoard() {
	var tr;
	var td;
	var check;
	var i = 0;
	var j = 0;
	var cellId = 0;
	var table = document.getElementById("myTable");
	for(i = 0; i < 8; i++) {
		tr = table.insertRow(i);
		for(j = 0; j < 8; j++) {
			td = tr.insertCell(j);
			if(i%2 == 1)
			{
				if(j%2 == 1)
				{
					td.setAttribute("class", "black");
				}
				else
				{
					td.setAttribute("class", "white");
				}
			}
			else
			{
				if(j%2 == 1)
				{
					td.setAttribute("class", "white");
				}
				else
				{
				td.setAttribute("class", "black");
				}
			}
			cellId = (i * 8) + j;
			td.setAttribute("id", cellId);
			var content = getSquare(i, j);
			if (content == "br") {
			var blackRook = document.createElement("IMG");
    			blackRook.setAttribute("src", "chess-piece-black-rook.png");
			td.appendChild(blackRook);
			}
			else if (content == "bk") {
			var blackKnight = document.createElement("IMG");
    			blackKnight.setAttribute("src", "chess-piece-black-knight.png");
			td.appendChild(blackKnight);
			}
			else if (content == "bb") {
			var blackBishop = document.createElement("IMG");
    			blackBishop.setAttribute("src", "chess-piece-black-bishop.png");
			td.appendChild(blackBishop);
			}
			else if (content == "bK") {
			var blackKing = document.createElement("IMG");
    			blackKing.setAttribute("src", "chess-piece-black-king.png");
			td.appendChild(blackKing);
			}
			else if (content == "bQ") {
			var blackQueen = document.createElement("IMG");
    			blackQueen.setAttribute("src", "chess-piece-black-queen.png");
			td.appendChild(blackQueen);
			}
			else if (content == "bp") {
			var blackPawn = document.createElement("IMG");
    			blackPawn.setAttribute("src", "chess-piece-black-pawn.png");
			td.appendChild(blackPawn);
			}
			else if (content == "wr") {
			var whiteRook = document.createElement("IMG");
    			whiteRook.setAttribute("src", "chess-piece-white-rook.png");
			td.appendChild(whiteRook);
			}
			else if (content == "wk") {
			var whiteKnight = document.createElement("IMG");
    			whiteKnight.setAttribute("src", "chess-piece-white-knight.png");
			td.appendChild(whiteKnight);
			}
			else if (content == "wb") {
			var whiteBishop = document.createElement("IMG");
    			whiteBishop.setAttribute("src", "chess-piece-white-bishop.png");
			td.appendChild(whiteBishop);
			}
			else if (content == "wK") {
			var whiteKing = document.createElement("IMG");
    			whiteKing.setAttribute("src", "chess-piece-white-king.png");
			td.appendChild(whiteKing);
			}
			else if (content == "wQ") {
			var whiteQueen = document.createElement("IMG");
    			whiteQueen.setAttribute("src", "chess-piece-white-queen.png");
			whiteQueen.setAttribute("id", "botImg");
			
			td.appendChild(whiteQueen);
			}
			else if (content == "wp") {
			var whitePawn = document.createElement("IMG");
    			whitePawn.setAttribute("src", "chess-piece-white-pawn.png");
			td.appendChild(whitePawn);
			}		
		}
	}
	addClickHandlers();
}

function addClickHandlers() {
    	var cells = document.getElementsByTagName("td");
    	for (var i = 0; i< cells.length; i++) {
		cells[i].onclick = function selectPiece() {
			var coordinates = document.getElementById("coordinates");
			var col = this.cellIndex
			console.log(this.cellIndex);
			var row = this.parentNode.rowIndex;
			console.log(this.id);
			var thisCell = this.id;
			var cellContent = document.getElementById(thisCell).innerHTML;
			console.log(cellContent);
			document.getElementById(this.id).style.backgroundColor = "blue";
			var cells = document.getElementsByTagName("td");
			for (var i = 0; i< cells.length; i++) {
				cells[i].onclick = function movePiece() {
					var coordinates = document.getElementById("coordinates");
					var col = this.cellIndex
					console.log(this.cellIndex);
					var row = this.parentNode.rowIndex;
					console.log(this.id);
					var thisCell = this.id;
					var cellContent = document.getElementById(thisCell).innerHTML;
					console.log(cellContent);
					document.getElementById(this.id).style.backgroundColor = "red";
					};
			}
			var postCoordinates = document.createTextNode("You clicked on coordinates: (" + row + "," + col + ").");
			coordinates.appendChild(postCoordinates);
			var br = document.createElement("br");
			coordinates.appendChild(br);
		};
    }
}

//Game state variables

var grid = [[ "br", "bk", "bb", "bK", "bQ", "bb", "bk", "br" ],
	    [ "bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp" ],
	    [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  " ],
	    [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  " ],
	    [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  " ],
	    [ "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  " ],
	    [ "wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp" ],
	    [ "wr", "wk", "wb", "wK", "wQ", "wb", "wk", "wr" ]];
var turn = 7;
var capturedWhite = [];
var capturedBlack = ["bp"];
var gameOver = false;

//Game state functions

function getSquare(row, col) {
	return grid[row][col];
}

function pawnMove(start, finish)
{
	
}

table {
	background-color: black;
}

td.white {
	height: 65px;
	width: 65px;
	background-color: white;
}

td.black {
	height: 65px;
	width: 65px;
	background-color: black;
	hover {
		background-color: white;
	}
}

img {
	height: 45px;
	width: 45px;
	padding: 10px;
}

td:hover {
	background-color: blue;
}

body {background: #cba;}
#botDiv {position: relative; bottom: 0; left: 0; height: 65;}
#botImg {position: relative; bottom: 0; left: 0;}

<!DOCTYPE html>
<html>
<head>
    	<title>Game Grid</title>
	<link rel="stylesheet" href="gameGridStyle.css">
</head>
<body onload="showBoard();">
<div id="botDiv">
</div>
<script src = "genTable.js"></script>
<script src = "model.js"></script>
<script src = "queenBot.js"></script>
<script src = "loadGame.js"></script>
<table id="myTable">  
</table>
<p id="coordinates">
</p>
<label>Here is your user data: </label>
<div id="username"></div><br>
<div id="timestamp"></div>

<button id="logoutButton" onclick="logout()">Log-out</button><br><hr>
<div id="loadDataDiv"></div>
<button id="loadGame" onclick="loadData()">Load Game</button><br><hr>
</body>
</html>