정의되지 않은 HTML 요소

Question

나는 Knight's Tour 게임을 자바 스크립트로 만들었습니다. 사용해보십시오 here. 는 (특히 오류를 재생)

내가 너무 많은 문제를 찾는 데있어 오류가

Uncaught TypeError: Cannot read property 'innerHTML' of undefined

을 읽어하지만 난 그게 정의되지 않은 이유를 모르겠어요. 나는 체스 판을 만드는 64 개의 세포가있는 테이블을 가지고있다. 모두 평범하고 빈 상태로 만들어졌습니다.

<table border=1 style="border: 1px solid black; table-layout: fixed;"> 
    <tr> 
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> 
    </tr><tr> 
    ... 

이것은 페이지의 유일한 표입니다. 나는 td 요소를 모두 검색하기 위해 자바 스크립트를 사용하고 게임 플레이를 위해 id, 클래스, 배경색 및 onclick eventListeners를 추가하여 반복합니다.

이 오류가 반복적으로 발생하는 몇 가지 다른 셀이있는 것으로 보입니다. 때로는 개별 셀이 오류를 생성하도록 할 수 있지만 다른 경우에는 그렇지 못합니다. 하나의 반복 가능한 예는 맨 아래 행에서 처음으로 이동하고 두 번째 셀에서 마지막 셀로 이동 한 다음 측면을 따라 두 개의 셀 위로 이동하고 한 번 오른쪽으로 이동하려고 시도하는 것입니다.

onclick 내부에서 innerHTML 속성을 자주 읽습니다. 나는 td 요소의 전역 tds 배열을 참조한다. 여기에 기본적으로 접근하는 나 자신의 모든 형태가 있습니다.

if (tds[cell].innerHTML === "") { 
if (tds[n].innerHTML === "♞") { 
tds[cell].innerHTML = "♞"; 
tds[target].innerHTML = "♘"; 
td.innerHTML = "♞"; 

은 정말 내가 내가 reading about를 사용하지 않을 때는 VAR을 사용하여 변수를 선언하고의 차이 때 알아 낸 줄 알았는데,하지만 난이 오류를 일으키는 하나의 VAR을 알아낼 수 없었다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

경계 테스트 :

if (x > 0 && y < 6) { //bottom right 

이 옳지 않다 상기 X 조건 x < 7이어야한다; 왼쪽 열을 피하려고 노력하는 것은 오른손 칸입니다.

모든 복제본 (그리고 이와 같은 간단한 복사 - 붙여 넣기 편집 오류의 가능성)을 피하려면 x/y 좌표로 위치 계산을 수행 한 다음 셀 인덱스를 계산하는 것이 좋습니다. 셀 인덱스에서 작업하고 각 경계를 개별적으로 검사합니다. 그리고 실제 테이블에는 rows/cells 속성이 있으므로 셀 인덱스 계산을 수행 할 필요가 없습니다. 예를 들면 다음과 같습니다.

var knight_moves = [[-1, -2], [1, -2], [-2, -1], [2, -1], [-2, 1], [2, 1], [-1, 2], [1, 2]]; 

for (var i= knight_moves.length; i-->0;) { 
    var other_x = x + knight_moves[i][0]; 
    var other_y = y + knight_moves[i][1]; 
    if (other_x>=0 && other_x<8 && other_y>=0 && other_y<8) { 
     var cell = table.rows[other_y].cells[other_x]; 
     if (cell.innerHTML=='♞') ... 
    } 
} 

Answer 2

문제는 그 시점에서 n가 tds 배열의 전체 길이 (63 0) 64이며 n가 나타내는 요소 배열의 범위 밖이기 때문에 오류가 발생있어 64와 동일하다는 것이다.