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 = ""; 
    } 
    }