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

我是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输入

有人能帮我理解我的代码出了什么问题吗？多谢各位

其他信息：

---

您可以查看我当前的所有工作文件，包括HTML、CSS和JS文档。

我认为您误解了innerHTML是什么。当您执行

b1=boxOne.innerHTML

时，您正在

b1

中存储当前html的字符串。您没有存储对innerHTML属性的引用。因此，当您执行

boxOne.innerHTML='X'

时，您会更改对象的内部html，但

b1

仍然保留内部html最初的内容

下面是一个澄清我陈述的例子：

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

  // initialInnerHTML won't change when you change boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;

  boxOne.innerHTML = '<a>New link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;

  alert(initialInnerHTML); // Alerts a blank dialog
  alert(newInnerHTML); // Alerts "<a>New link</a>"


  // An example of storing a reference to an object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;

  alert(appleReference.quantity); // Alerts 7

  shoppingCart.apples.quantity = 9;

  alert(appleReference.quantity); // Alerts 9

}

---

我认为你误解了innerHTML是什么。当您执行

b1=boxOne.innerHTML

时，您正在

b1

中存储当前html的字符串。您没有存储对innerHTML属性的引用。因此，当您执行

boxOne.innerHTML='X'

时，您会更改对象的内部html，但

b1

仍然保留内部html最初的内容

下面是一个澄清我陈述的例子：

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

  // initialInnerHTML won't change when you change boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;

  boxOne.innerHTML = '<a>New link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;

  alert(initialInnerHTML); // Alerts a blank dialog
  alert(newInnerHTML); // Alerts "<a>New link</a>"


  // An example of storing a reference to an object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;

  alert(appleReference.quantity); // Alerts 7

  shoppingCart.apples.quantity = 9;

  alert(appleReference.quantity); // Alerts 9

}

---

我认为你误解了innerHTML是什么。当您执行

b1=boxOne.innerHTML

时，您正在

b1

中存储当前html的字符串。您没有存储对innerHTML属性的引用。因此，当您执行

boxOne.innerHTML='X'

时，您会更改对象的内部html，但

b1

仍然保留内部html最初的内容

下面是一个澄清我陈述的例子：

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

  // initialInnerHTML won't change when you change boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;

  boxOne.innerHTML = '<a>New link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;

  alert(initialInnerHTML); // Alerts a blank dialog
  alert(newInnerHTML); // Alerts "<a>New link</a>"


  // An example of storing a reference to an object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;

  alert(appleReference.quantity); // Alerts 7

  shoppingCart.apples.quantity = 9;

  alert(appleReference.quantity); // Alerts 9

}

---

我认为你误解了innerHTML是什么。当您执行

b1=boxOne.innerHTML

时，您正在

b1

中存储当前html的字符串。您没有存储对innerHTML属性的引用。因此，当您执行

boxOne.innerHTML='X'

时，您会更改对象的内部html，但

b1

仍然保留内部html最初的内容

下面是一个澄清我陈述的例子：

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

  // initialInnerHTML won't change when you change boxOne.innerHTML
  var initialInnerHTML = boxOne.innerHTML;

  boxOne.innerHTML = '<a>New link</a>'; // Change the dom content
  var newInnerHTML = boxOne.innerHTML;

  alert(initialInnerHTML); // Alerts a blank dialog
  alert(newInnerHTML); // Alerts "<a>New link</a>"


  // An example of storing a reference to an object
  var shoppingCart = {
          apples: { price: 6, quantity: 7 },
          oranges: { price: 10, quantity: 8 }
      };
  var appleReference = shoppingCart.apples;

  alert(appleReference.quantity); // Alerts 7

  shoppingCart.apples.quantity = 9;

  alert(appleReference.quantity); // Alerts 9

}

---

代码的问题在于逻辑；您有几个变量（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();
}

window.onload=function（）{
//实例化电路板
var board=document.getElementsByClassName（'box'）；
对于（变量i=0；i

代码的问题在于逻辑；您有几个变量（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();
}

window.onload=function（）{
//实例化电路板
var board=document.getElementsByClassName（'box'）；
对于（变量i=0；i

代码的问题在于逻辑；您有几个变量（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();
}

window.onload=function（）{
//