更新第二个棋子的位置使棋子消失答案

【问题标题】：Updating position of 2nd chess piece makes the piece disappear更新第二个棋子的位置使棋子消失
【发布时间】：2022-01-16 12:53:56
【问题描述】：

我正在自学 JS。我可以将一块棋子移到新位置，但第二块棋子消失了。似乎 addEventListener 进入了一个循环，我不明白为什么。只需要了解我在这里缺少什么概念：我的代码如下：国际象棋.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chess board</title>
    <style>
        .cell {
            height: 30px;
            width: 30px;
            border: 1.5px solid grey;
            border-style: inset;
        }
 
        .greencell {
            background-color: #AFE1AF;
        }

        .darkgreencell {
            background-color: #097969;
        }
        .redcell {
            background-color: red;
        }
    </style>
</head>
<body>
<script src="js/chess.js" defer></script>
</body>
</html>

js/chess.js


function movep(cbp,cbt,i,j) {
    //Creating rules for pawn
  console.log('P');
    //console.log(cbp);
    //refresh_colors(cbp,cbt);
    if ((i>=0) & (i<=7)) {
        if(cbp[i+1][j].length<2) {
            //Based on player 1, if the location below the pawn is open then cbt masks that as 1
            cbt[i+1][j]=1;
        }
    }
    potential_moves(cbp,cbt,[i,j]);
  update_board(cbp,cbt);
}

var possiblelocs=function(event,i,j,cbp,cbt) {
    //based on string value of cbp (the chess piece of interest) 
  //I have to create rules for possible ways it can go
  if (cbp[i][j].includes('P') ) {movep(cbp,cbt,i,j);}
    //else if (cbp[i][j].includes('K')) {console.log('K');}
    else if (cbp[i][j].includes('N')) {movep(cbp,cbt,i,j);}//using the function for pawn here for debugging purposes
    //else if (cbp[i][j].includes('Q')) {console.log('Q');}
    else if (cbp[i][j].includes('R')) {movep(cbp,cbt,i,j);}//using the function for pawn here for debugging purposes
    //else if (cbp[i][j].includes('B')) {console.log('B');}
    //console.log(cbp);
}

function update_board(cbp,cbt) {
  //fills the board with all the proper pieces
  var elem = document.getElementsByTagName('td');
  //console.log(cbp);
  for(var i=0;i<8;i++) {
    for(var j=0;j<8;j++) {
        elem[8*i+j].innerHTML=cbp[i][j];
        if (elem[8*i+j].innerHTML.length > 1) {
        //create a clickable EventListener if there is a string value >1 (i.e. not-empty)
            elem[8*i+j].addEventListener( "click",possiblelocs.bind(event,'str',i,j,cbp,cbt) );
        }
    }
  }
}


var movelocs=function(event,i,j,cbp,cbt,pc) {
  //replace old location of string in cbp to the new one
  cbp[i][j]=cbp[pc[0]][pc[1]];
    cbp[pc[0]][pc[1]]='';
  update_board(cbp,cbt);
}

function potential_moves(cbp,cbt,pc) {
  //updates the board with possible location a specific piece can move (based on cbt) 
  //and makes the red cells clickable
  var elem = document.getElementsByTagName('td');
  for(var i=0;i<8;i++) {
    for(var j=0;j<8;j++) {
        if (cbt[i][j]==1) {
                elem[8*i+j].setAttribute('class', 'cell redcell');
        //once click move the board to the new location
                elem[8*i+j].addEventListener( "click",movelocs.bind(event,'str',i,j,cbp,cbt,pc) );
            }
        }
    }
}

我试图找出根本原因，但我无法找到更多根本原因。这是我看到的行为：板子启动时：

点击“R11”后，我看到下面出现一个红色方块，看看它可以去哪里，如下所示：

完成后，我看到 R11 棋子向下移动 1，我还单击 N11 以查看可用选项（我知道规则不适合这些棋子）。然后我看到下图：

此时我点击 N11 下方的红色方块，我看到 N11 已经完全消失了。

我最好的理解是 movelocs 进入一个循环并删除我刚刚移动的部分。我不确定它为什么会这样。如果有人对如何调试它有任何建议也会有所帮助。

【问题讨论】：

有很多代码要让陌生人免费弄清楚。请提供minimal reproducible example。只需从上面的代码中删除与您的问题无关的所有逻辑，这些逻辑仍然会产生错误。您不仅会帮助我们帮助您，还会帮助自己弄清楚！
问题应该和我的回答有关。每次单击字段时都无法添加新的侦听器。
尝试使用调试；在您的代码中添加关键字并逐步观察执行。查一下
@Inigo 我进行了更改，但无法删除太多代码，因为我认为问题更具结构性。

标签： javascript html arrays chess

【解决方案1】：

我刚刚快速浏览了您的代码，发现了潜在的问题。在update_board 中，您将事件侦听器添加到所有字段。并且在事件处理函数possiblelocs 中调用movep 在此函数中再次调用update_board。这设置了另一个事件监听器。因此，每次单击字段时，听众的数量基本上都会增加一倍。

【讨论】：

我认为您可能正在做某事，我现在正在调查这个问题，我的直觉是您可能正在做某事。