자바 스크립트 : 버튼이있는 .innerHTML 데이터 저장

Question

저는 자바 스크립트를 처음 접했고 간단한 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 문서가 포함 된 모든 현재 작업 파일 here on Github을 검토 할 수 있습니다.

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); 
} 

그러나 반복적 인 반복을 피하기 위해 자바 스크립트에는 약간의 정리가 필요합니다.

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