Javascript:使用按钮保存 .innerHTML 数据

Question

我是 Javascript 新手，我正在尝试学习创建一个简单的 Tic Tac Toe 程序。在这个阶段我不关心重构，而是让基本元素发挥作用。代码如下:

 window.onload = function() {
  // Establish the boxes for the selector
  var boxOne = document.querySelector("#b1");

  // Create an event when a box is clicked
  boxOne.onclick = function() {
    if (boxOne.innerHTML === "X") {
        boxOne.innerHTML = "O";
    } else {
        boxOne.innerHTML = "X";
    }

  }

  // Check the current innerHTML of the grid for a win.
  var b1 = boxOne.innerHTML,
      b2 = boxTwo.innerHTML,
      b3 = boxThree.innerHTML,
      b4 = boxFour.innerHTML,
      b5 = boxFive.innerHTML,
      b6 = boxSix.innerHTML,
      b7 = boxSeven.innerHTML,
      b8 = boxEight.innerHTML,
      b9 = boxNine.innerHTML;

  var board = [
    [b1, b2, b3],
    [b4, b5, b6],
    [b7, b8, b9]
    ];

  endButton.onclick = function() {
    console.log(board);
  }

  var clearButton = document.getElementById('clear');
  var allBoxes = document.querySelector(".box");

  clearButton.onclick = function() {
    allBoxes.innerHTML = "";
  }
}

玩家应该能够单击一个框来选择 X 或 O。然后我希望他们单击​​“结束回合”，以便游戏可以检查棋盘的当前状态并在必要时报告获胜条件。

但是，它似乎并没有保存玩家的输入。当我调用“.innerHTML”时，它只返回一个空白数组。然而，如果我查看浏览器控制台，我会发现“.innerHTML”元素中有一个 X 或 O。所以数据在那里，但没有被输入到数组中。我尝试在它的不同实现上测试它，但数组仍然为空。

“清除”按钮也不起作用。到目前为止，我在 Google 上搜索到的所有内容均使用此处的示例来清除元素中的 HTML 输入。

任何人都可以帮助我理解我的代码有什么问题吗？谢谢。

附加信息:您可以查看我当前的所有工作文件 here on Github ，其中包括 HTML、CSS 和 JS 文档。

Answer 1

你的代码的问题在于逻辑；您有几个变量(boxOne..boxNine、b1..b9、board)。您可以实例化这些变量，但只需更改 onclick 事件中的 boxOne..boxNine 变量。此外，在实例化电路板后，您永远不会更新它(这就是为什么当您单击“结束回合”按钮时它总是空白的)。

您的 endButton.onclick 函数应更改为此以使其正常工作；

endButton.onclick = function() {
  // Check the current innerHTML of the grid for a win.
  var b1 = boxOne.innerHTML,
  b2 = boxTwo.innerHTML,
  b3 = boxThree.innerHTML,
  b4 = boxFour.innerHTML,
  b5 = boxFive.innerHTML,
  b6 = boxSix.innerHTML,
  b7 = boxSeven.innerHTML,
  b8 = boxEight.innerHTML,
  b9 = boxNine.innerHTML;

  var board = [
   [b1, b2, b3],
   [b4, b5, b6],
   [b7, b8, b9]
  ];
  console.log(board);
}

但是，您的 JavaScript 需要进行一些清理，以避免重复；

window.onload = function() {

// Instantiate board
var board = document.getElementsByClassName('box');
for (var i = 0; i < board.length; i++) {
    board[i].onclick = function() {
        this.innerHTML = (this.innerHTML === 'X')? 'O' : 'X';
    }
}

// A function to render the board
var renderBoard = function() {
    for (var i = 0; i < board.length; i++) {
        this.innerHTML = 'X';
    }
}

// End turn
var endButton = document.getElementById('endturn');
endButton.onclick = function() {
    // Do magic
}

// Clear board
var clearButton = document.getElementById('clear');
clear.onclick = function() {
  for (var i = 0; i < board.length; i++) {
        board[i].innerHTML = '';
    }
}

renderBoard();
}