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

Question

我是JavaScript新手，我试图学会创建一个简单的井字游戏程序。在这个阶段，我并不担心重构，而是获得基本元素的工作。下面的代码：

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.所以数据在那里，但它没有被输入到数组中。我试图在不同的实现上测试它，但数组仍然是空白的。

“清除”按钮也不起作用。到目前为止我所使用的所有东西都使用我在这里作为例子来清除元素的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 = ""; 
    } 
    }