자바 스크립트 배열 또는 색인이 정의되지 않았습니다.

Question

DOM 테이블이 포함 된 웹 응용 프로그램을 작성하고 있습니다. 이 배열에서 테이블을 만들어야 내 코드입니다 :

function create_table() { 
    var tablediv=document.getElementById('icon-table'); 
    var table = document.createElement("table"); 
    var grid = [[15][15]]; 
    var template = "pixel-{1}-{2}"; 
    table.className = "icon-table"; 
    tablediv.appendChild(table); 
    for (var i = 0; i < 16; i++) { 
     var tr = document.createElement("tr"); 
     table.appendChild(tr); 
     for (var j = 0; j < 16; j++) { 
      var td = document.createElement("td"); 
      td.className = "icon-pixel"; 
      td.id="pixel-"+ i + "-" + j; 
      td.style.backgroundColor = "rgb(255,255,255)"; // no dash - css attribute name becomes camelCase 
      grid[i][j] = td; 
      td.addEventListener("click", setpixel) 
      td.addEventListener("mousedown", pinselpixel) 
      tr.appendChild(td); 
     } 
    } 
} 

할당 표 [i] [j] = td; 첫 번째 루프 반복 중에 실패합니다. 내가 무엇을 놓치고

TypeError: undefined is not an object (evaluating 'grid[i][j] = td') 

: 출력 말한다 브라우저에서 콘솔에 ?

Answer 1

여기에 몇 가지 문제가 있습니다. 먼저, 당신은 그 느낌을 받고있는 것 같습니다.

[[15],[15]] 

은 각각 15 개의 키가있는 두 개의 하위 배열이있는 배열을 만듭니다.

대신 무엇을 그 사실을 제공하는 것은 각각 하나의 키를 각각 포함 된 두 개의 하위 배열과 배열 당신은 아마 의미 (15)

값으로, 이것이다

[new Array(15), new Array(15)] 

의 정수를 전달 배열 생성자가 슬롯을 만듭니다. 배열 리터럴에 전달하면 해당 값이 배열에 추가됩니다.

그런데도이 방법은 이상적이지 않습니다. 예, 15 슬롯 (실제로는 아마도 16을 의미)를 포함하고 있지만, 지금 바로 undefined 슬롯을, 그래서 당신이 배열로 undefined을 처리 할 수 ​​없기 때문에이 라인은 실패합니다

grid[i][j] = td; //grid[i] == undefined, not an array 

더 나은이 (간략하게 잘립니다) :

for (var i = 0; i < 16; i++) { 
     grid[i] = []; //<-- create the row array in the loop 
     var tr = document.createElement("tr"); 
     table.appendChild(tr); 
     for (var j = 0; j < 16; j++) { 
      var td = document.createElement("td"); 
      grid[i][j] = td; //<-- now we can append the column cell 
      tr.appendChild(td); 
     } 
    } 

Answer 2

내부에 2 개의 요소가있는 배열의 배열을 반복하려고합니다. 각 요소는 하나의 항목을 가진 배열입니다 (말했듯이) 15.

는 그 후 당신은 0에서 15

에 반복하려고 그래서 반복해야 grid 배열과 길이까지 이후 이상 grid의 요소를 첫 번째 루프에서.

제 의견으로는 여기서 배열을 반복 할 필요는 없습니다. 다만 다음을 수행하십시오

var myGrid = [] 
for (var i = 0; i < 16; i++) { 
    for var k = 0; k < 16; k++) { 
    //do your stuff 
    myGrid[i][k] = td 
    } 
} 

이 두 차원 배열을 intializing의 방법이 잘못

Answer 3

작동합니다.

아래의 방법으로 초기화하십시오.

var grid = new Array(15); 
for (var i = 0; i < 16; i++) { 
    grid[i] = new Array(15); 
} 

먼저 우리는 각 행 15 columns 초기화 후 루프를 사용하여 어레이 (15 rows)의 열을 생성한다. 그럼 코드가 잘 작동합니다!

function create_table() { 
 
    var tablediv=document.getElementById('icon-table'); 
 
    var table = document.createElement("table"); 
 
    var grid = new Array(15); 
 
    for (var i = 0; i < 16; i++) { 
 
     grid[i] = new Array(15); 
 
    } 
 
    var template = "pixel-{1}-{2}"; 
 
    table.className = "icon-table"; 
 
    tablediv.appendChild(table); 
 
    for (var i = 0; i < 16; i++) { 
 
     var tr = document.createElement("tr"); 
 
     table.appendChild(tr); 
 
     for (var j = 0; j < 16; j++) { 
 
      var td = document.createElement("td"); 
 
      td.className = "icon-pixel"; 
 
      td.id="pixel-"+ i + "-" + j; 
 
      td.style.backgroundColor = "rgb(255,255,255)"; // no dash - css attribute name becomes camelCase 
 
      grid[i][j] = td; 
 
      td.addEventListener("click", function(){console.log("clicked");}) 
 
      td.addEventListener("mousedown", function(){console.log("mousedown");}) 
 
      tr.appendChild(td); 
 
     } 
 
    } 
 
} 
 
create_table();

<div id="icon-table"></div>

Answer 4

귀하의 grid 초기화가 잘못된 것입니다. 일부 의견에 의해 언급 한 바와 같이 : 당신은 아마 대신 할

const arr = [15]; // array with one element, 15 
var grid = arr[15]; // 16th element, which doesn't exist 

:

var grid = [[15][15]]; 

에 해당

var grid = new Array(15).fill(new Array(15)); 

당신에게 15 "폭 2 차원 배열을 줄 것이다 "15"키가 크다. "

그런데, 다른 어떤 이유로는 그리드를 미리 채울 필요가 없습니다 (체스 판이나 항상 고정 크기 인 것을 인쇄하는 것과 같은).

Answer 5

변경할 수 있습니까?

var grid = [new Array(15), new Array(15)];