是否可以保存在JavaScript上单击的元素以供以后在函数中使用？

我目前正在用JS、HTML和CSS编程一个checkers接口。我已经制作了棋盘和棋子。我想写一些函数来移动碎片。我希望通过让用户点击工件，然后让他/她点击他们想要移动到的正方形来实现。假设这是一个合法的移动，有没有一种方法可以让我将点击的部分保存为变量或其他任何东西，并在以后的函数中使用它（将其移动到请求的方块）？ 下面是我的（很长）JS代码（结合了一些CSS和HTML）：

var-player=1；
函数CreateBoard（）{
var board=document.createElement（“表”）；
board.cellSpacing=0；
对于（变量i=0；i<8；i++）{
var tr1=document.createElement（“tr”）；
对于（var j=0；j<8；j++）{
var td1=document.createElement（“td”）；
td1.setAttribute（“id”，“td”+i+j）；
如果（i%2==0）{
如果（j%2==0）
td1.style.backgroundColor=“米色”；
其他的
td1.style.backgroundColor=“黑色”；
}
否则{
如果（j%2==0）
td1.style.backgroundColor=“黑色”；
其他的
td1.style.backgroundColor=“米色”；
}
tr1.附肢儿童（td1）；
}
董事会成员（tr1）；
}
文件.正文.附件（董事会）；
}
函数DeployPieces（）{
CreateBoard（）；
var指数=1；
var isEmpty=新数组（8）；
对于（变量i=0；i<8；i++）{
isEmpty[i]=新数组（8）；
对于（var j=0；j<8；j++）{
isEmpty[i][j]=真；
}
}
对于（变量i=0；i<8；i++）{
如果（i<3）{
如果（i%2==0）{
对于（变量j=1；j<8；j+=2）{
var td1=document.getElementById（“td”+i+j）；
var circle1=document.createElement（“span”）；
圆圈1.setAttribute（“类”、“红圈”）；
圆圈1.设置属性（“id”，“圆圈”+i+j）；
圆圈1.setAttribute（“onclick”、“AlertToPressOnSquare（player）；”；
td1.追加子项（圈1）；
isEmpty[i][j]=假；
}
}
否则{
对于（var j=0；j<8；j+=2）{
var td2=document.getElementById（“td”+i+j）；
var circle2=document.createElement（“span”）；
圆圈2.setAttribute（“类”、“红圈”）；
圆圈2.setAttribute（“id”，“圆圈”+i+j）；
圆圈2.setAttribute（“onclick”、“AlertToPressOnSquare（player）；”；
td2.追加子项（圈2）；
isEmpty[i][j]=假；
}
}
}
如果（i>4），则为else{
如果（i%2==0）{
对于（变量j=1；j<8；j+=2）{
var td3=document.getElementById（“td”+i+j）；
var circle3=document.createElement（“span”）；
圆圈3.setAttribute（“类”、“白圈”）；
圆圈3.设置属性（“id”，“圆圈”+i+j）；
圆圈3.setAttribute（“onclick”、“AlertToPressOnSquare（player）；”；
td3.追加子项（圆圈3）；
isEmpty[i][j]=假；
}
}
否则{
对于（var j=0；j<8；j+=2）{
var td4=document.getElementById（“td”+i+j）；
var circle4=document.createElement（“span”）；
圆圈4.setAttribute（“类”、“白圈”）；
圆圈4.设置属性（“id”，“圆圈”+i+j）；
圆圈4.setAttribute（“onclick”、“AlertToPressOnSquare（player）；”；
td4.追加子项（圆圈4）；
isEmpty[i][j]=假；
}
}
}  
}
}
功能AlertTopPressonPiece（播放器）{
警惕（“玩家”+玩家+”，请按你想移动的棋子）；
如果（玩家==1）
玩家=2；
else if（player==2）
玩家=1；
}
函数AlertToPressOnSquare（播放器）{
警惕（“玩家“+玩家+”，请按你想移动棋子的方块”）；
如果（玩家==1）
玩家=2；
else if（player==2）
玩家=1；
}

现在，我有了所有td和圆的id（我这样做是为了id是元素的初始位置（例如01=I=0，j=1））。我也知道保存后如何移动该块。我只是需要一个简单的方法来访问点击的圆圈以后（可能通过它的id或任何东西）。

---

谢谢

您可以将整个元素保存到一个变量中，但最好只保存片段的x和y位置。您可以创建公共变量

selectedX

和

selectedY

或创建单个变量，例如

selected={x:5，y:6}

。然后，您可以随时通过执行以下操作获取元素：

var element = document.getElementById('td' + selected.x + selected.y);

这基于您如何分配上述ID的格式：

td1.setAttribute("id", "td" + i + j);

---

我花了一整天的时间才想出一个不完整的例子来向你展示你可能想要如何启动你的游戏板。还有很多事情要做。现在已经很晚了，我已经尽力了。祝你好运

//{
doc=document；htm=doc.documentElement；bod=doc.body；nav=navigator；M=tag=>doc.createElement（tag）；I=id=>doc.getElementById（id）；
mobile=/Mobi/i.test（nav.userAgent）；
S=（选择器，在范围内）=>{
设w=在| | doc内；
返回w.querySelector（选择器）；
}
Q=（选择器，内部）=>{
设w=在| | doc内；
返回w.querySelectorAll（选择器）；
}
hC=（节点，类名）=>{
返回node.classList.contains（className）；
}
aC=（节点，…类名）=>{
node.classList.add（…类名）
td1.setAttribute("id", "td" + i + j);