JS国际象棋开发求助：获取棋子父div ID异常

我用JS、HTML和CSS开发国际象棋游戏，给每个兵绑定了onclick事件，想获取棋子所在父div（棋盘方块）的ID，以此高亮显示兵可移动的方块，但实际拿到的是另一个div的ID，求解决。

问题代码 #

HTML #

<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp1" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp2" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp3" class="blp"></div></div>
<div id="7b" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp4" class="blp"></div></div>

<div id="8b"><button class="Btns r8"></button><div id="mp5" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp6" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp7" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>
<div id="8b"><button class="Btns r8"></button><div id="mp8" class="blp"></div></div>
<div id="8b" class="whitesmoke"><button class="Btns r8"></button></div>

JS #

for (let i=0; i<8; i++) {
let blps = document.getElementsByClassName("blp")[i]
let whps = document.getElementsByClassName("whp")[i]
whps.onclick = function() {moveblp(i)};
blps.onclick = function() {movewhp(i)};
}

function movewhp(a) {
let pawn = document.getElementsByClassName("whp")[a]
let parent = Number.parseInt(pawn.parentElement.id)

console.log(parent)
}

注：b代表block（方块），r代表row（行），棋盘为8×8布局，共64个父div。

问题原因 #

1. ID不唯一违反HTML规范：HTML要求ID是页面唯一标识，你给多个父div设置了重复ID（如7b、8b多次出现），浏览器通过ID获取元素时只会返回第一个匹配项，导致拿到的父元素ID始终是重复ID的第一个元素。
2. 索引绑定事件的隐患：通过循环索引绑定事件再用索引取元素，容易因DOM结构变化、重复元素等问题，导致关联的元素和实际点击的元素不匹配。

解决方案 #

1. 修复父div的唯一ID #

给每个棋盘方块分配唯一ID，比如采用行号+列号的组合（如7a、7b、7c...8g、8h），确保每个div的id唯一，示例：

<div id="7a" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7b"><button class="Btns r7"></button><div id="mp1" class="blp"></div></div>
<div id="7c" class="whitesmoke"><button class="Btns r7"></button></div>
<div id="7d"><button class="Btns r7"></button><div id="mp2" class="blp"></div></div>
<!-- 其余方块依次分配唯一ID -->

2. 优化事件绑定逻辑 #

放弃索引绑定，直接通过this获取当前点击的棋子元素，再获取其父元素ID，避免索引错位：

// 绑定黑兵点击事件
document.querySelectorAll('.blp').forEach(pawn => {
  pawn.onclick = function() {
    const parentBlockId = this.parentElement.id;
    console.log(parentBlockId);
    // 这里添加高亮可移动方块的逻辑
  };
});

// 绑定白兵点击事件
document.querySelectorAll('.whp').forEach(pawn => {
  pawn.onclick = function() {
    const parentBlockId = this.parentElement.id;
    console.log(parentBlockId);
    // 这里添加高亮可移动方块的逻辑
  };
});

修改后，点击任意兵都能准确获取其所在父方块的唯一ID，后续可基于该ID正确计算并高亮可移动区域。

内容的提问来源于stack exchange，提问作者user20545624