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.然后我希望他们点击“结束转弯”。这样游戏就可以检查棋盘的当前状态，并在必要时报告胜利条件。

然而，它似乎并没有保存播放器输入。当我调用＆＃39; .innerHTML＆＃39;它只返回一个空白数组。然而，如果我看一下浏览器控制台，我会看到＆＃39; .innerHTML＆＃39; element中有一个X或O.所以数据就在那里，但它并没有被输入到数组中。我试图在不同的实现上测试它，但是数组仍然是空白的。

＆＃34; Clear＆＃34;按钮也不起作用。到目前为止，我所使用的所有内容都以我在此为例来清除元素中的HTML输入。

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

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

Answer 1

代码的问题在于逻辑;你有几个变量（boxOne..boxNine，b1..b9，board）。您可以实例化这些变量，但只更改onclick事件中的boxOne..boxNine变量。此外，在实例化之后你永远不会更新电路板（这就是为什么当你点击'end turn'按钮时它总是空白的。）

您的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();
}

Answer 2

我认为你误解了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

}

要解决您的问题，您需要在按下每个按钮时获取dom元素的innerHTML属性，而不是仅在加载页面时才执行此操作。

你的第二个问题是因为document.querySelector('.box')只返回与选择器匹配的第一个dom元素。您应该使用document.querySelectorAll('.box')返回元素数组。然后，遍历数组并在每个数组上设置innerHTML。

清除按钮：

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

  clearButton.onclick = function() {
    for(var i = 0; i < allBoxes.length; i++){
        allBoxes[i].innerHTML = "";
    }
  }

Javascript：使用Button保存.innerHTML数据

2 个答案: