Javascript 和 HTML - 令牌未出现在连接四板上

Question

我正在使用 javascript、html 和 css 创建四人连线游戏，但我在 game.js 中的 refreshGrid() 函数遇到了问题。运行我的 html 文件目前只是一个空板，这个功能应该是这样的，当用户点击板上的空白区域时，会出现一个芯片。我不确定为什么这个功能不起作用，希望得到一些帮助。我不确定我是否正确地遍历了我的行和列。

var player=1; 

var grid = [

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0],

  [0, 0, 0, 0, 0, 0, 0]

];

function selectColumn(col) {

  if(player==1){

    grid[5][col]=1;

    player=2;

    document.getElementById("box1").innerHTML="Player 1's Turn";

  }else{

    grid[5][col]=2;

    player=1;

    document.getElementById("box1").innerHTML="Player 2's Turn";

  }

  refreshGrid();

}

function refreshGrid() {

  for (var row = 0; row < 6; row++) {

    for (var col = 0; col < 7; col++) {

      if (grid[row][col]==0) { 

                document.getElementById("cell"+row+col).style.backgroundColor="#FFFFFF";

      } else if (grid[row][col]==1) { //1 for yellow

                document.getElementById("cell"+row+col).style.backgroundColor="#FFFF00";

      } else if (grid[row][col]==2) { //1 for yellow

                document.getElementById("cell"+row+col).style.backgroundColor="#FF0000";

       }

    }

  }  

}

Answer 1

您的代码中有太多错误。我什至不知道从哪里开始，我会用我记得的东西和提示来编辑这篇文章。var player=1;&nbsp;var grid = [&nbsp; [0, 0, 0, 0, 0, 0, 0],&nbsp; [0, 0, 0, 0, 0, 0, 0],&nbsp; [0, 0, 0, 0, 0, 0, 0],&nbsp; [0, 0, 0, 0, 0, 0, 0],&nbsp; [0, 0, 0, 0, 0, 0, 0],&nbsp; [0, 0, 0, 0, 0, 0, 0]];function selectColumn(col) {&nbsp; for (let row = 0; row < 7; ++row) {&nbsp; &nbsp; if(grid[row][6-col]){&nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; }&nbsp; &nbsp; if(player==1){&nbsp; &nbsp; &nbsp; grid[row][6-col]=1;&nbsp; &nbsp; &nbsp; player=2;&nbsp; &nbsp; &nbsp; document.getElementById("box1").innerHTML="Player 1's Turn";&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; grid[row][6-col]=2;&nbsp; &nbsp; &nbsp; player=1;&nbsp; &nbsp; &nbsp; document.getElementById("box1").innerHTML="Player 2's Turn";&nbsp; &nbsp; }&nbsp; &nbsp; break;&nbsp; }&nbsp; refreshGrid();}function refreshGrid() {&nbsp; for (var row = 0; row < 6; row++) {&nbsp; &nbsp; for (var col = 0; col < 7; col++) {&nbsp; &nbsp; &nbsp; const htmlElement = document.querySelector(`#column-${6-col} .row-${row}`);&nbsp; &nbsp; &nbsp; if (grid[row][col]==0) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlElement.style.backgroundColor="#FFFFFF";&nbsp; &nbsp; &nbsp; } else if (grid[row][col]==1) { //1 for yellow&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlElement.style.backgroundColor="#FFFF00";&nbsp; &nbsp; &nbsp; } else if (grid[row][col]==2) { //1 for yellow&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlElement.style.backgroundColor="#FF0000";&nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp; }&nbsp;&nbsp;}.column {&nbsp; display: grid;&nbsp; grid-auto-flow: row;}#grid {&nbsp; display: grid;&nbsp; grid-auto-flow: column;}<div id="box1"><h1>Player 2's turn.</h1></div><div id="grid">&nbsp; &nbsp; <div class="column" id="column-0" data-x="0">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(0)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column"&nbsp; id="column-1" data-x="1">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(1)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column" id="column-2" data-x="2">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(2)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column" id="column-3" data-x="3">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(3)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column" id="column-4" data-x="4">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(4)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column" id="column-5" data-x="5">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(5)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp;&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="column" id="column-6" data-x="6">&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-5" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-4" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-3" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-2" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-1" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <svg height="75" width="75" stroke="black" stroke-width="5" class="row-0" onclick="selectColumn(6)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle cx="45" cy="45" r="30"&nbsp; &nbsp;class="free" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp;&nbsp; &nbsp; </div></div>&nbsp; &nbsp; <script src="game.js"></script></div>你的代码真的很乱，你的问题不够集中。我这样做的唯一原因是因为这个想法很有趣而且我想看到它奏效。我记得的事情：您的列和行在您的 html 结构中（现在仍然）是倒置的。您的脚本中有单元格行，html 中有单元格列。您在同一列中调用 (selectColumn with 0, 1, 2, 3, 4, ...) ...不要使用幻数（像 6 或 7 这样的原始数字），而是使用常量。您可以定义 NUMBER_OF_ROWS 和 NUMBER_OF_COLUMNS。字符串也一样。您可以使用 javascript 生成一个数组并使用该数组创建您的 html 元素。您试图访问一个不存在的 board 变量。当没有用行和列定义的 id 时，您试图通过 id 选择单元格。