JS开发问题：象棋游戏中无法为按钮重复绑定onclick事件

核心问题原因 #

直接通过element.onclick = function()的方式绑定事件，会覆盖之前已绑定的onclick事件，所以你第二次赋值吃子逻辑时，把原本的移动棋子事件冲掉了，导致两个逻辑无法共存。

修复方案 #

使用addEventListener('click', 函数)来添加事件监听，这种方式可以给同一个元素绑定多个点击事件，不会互相覆盖。

具体修改步骤 #

1. 修改移动棋子的事件绑定：
   将原来的block.onclick = function() {movepawn(block, pawn)};替换为：

block.addEventListener('click', function() {
  movepawn(block, pawn);
});

2. 修改吃子逻辑的事件绑定：
   把你标注的b11.onclick = function() {removepawn(b11)};替换为：

b11.addEventListener('click', function() {
  removepawn(b11);
});

额外优化建议 #

• 你的代码中b11没有用let声明，属于全局变量，建议加上let避免全局污染：let b11 = "r"+b1;
• 如果后续需要移除某个事件监听，建议使用命名函数而非匿名函数，这样可以用removeEventListener精准移除。示例：

// 先定义命名函数
function handleMove(block, pawn) {
  movepawn(block, pawn);
}
// 绑定事件时用bind传递参数
block.addEventListener('click', handleMove.bind(null, block, pawn));

修改后的完整关键代码片段 #

function hlblp(a) {
  let pawn = document.getElementsByClassName("blp")[a];
  let parent = Number.parseInt(pawn.parentElement.id);
  hightlitght(parent);
  for (let i=0; i<64; i++) {
    let block = document.getElementsByClassName("Btns")[i];
    // 改用addEventListener添加移动事件
    block.addEventListener('click', function() {
      movepawn(block, pawn);
    });
  }
}

function removepawn(b) {
  console.log(b[0]);
}

function hightlitght(a) {
  if (var1==true) {
    var1 = false;
    let var2 = a-10;
    var2 = var2+"b";
    if (occupied[var2]==true) {
      let b1 = a-20;
      let b11 = "r"+b1; // 添加let声明
      let occ1 = b1+"b";
      b11 = document.getElementsByClassName(b11)[0];
      // 改用addEventListener添加吃子事件
      b11.addEventListener('click', function() {
        removepawn(b11);
      });
      if ( occupied[occ1] == false ) {
        if (
          b1 < 89 && b1 > 80 ||
          b1 < 79 && b1 > 70 ||
          b1 < 69 && b1 > 60 ||
          b1 < 59 && b1 > 50 ||
          b1 < 49 && b1 > 40 ||
          b1 < 39 && b1 > 30 ||
          b1 < 29 && b1 > 20 ||
          b1 < 19 && b1 > 10
        ) {
          b11.style.display = "block";
        }
      }
    }
  }
}

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