[Vahan60]

Доброго времени суток всем.
Пытаюсь сделать игрушку.
Есть таблица 5/1 с разноцветными ячейками. При клике на ячейку должно открываться диалоговое окно с таблицей 3/1 закрашенной в оттенки кликнутой ячейки первой таблицы.
Застрял на том, что окно открывается, но закрашиваться не хочет. Причем, если я в код ввожу конкретное значение(например[2]), то все работает (закомментированная часть кода), а если пишу в общем виде [i] - выдает ошибку и не закрашивает открытое окно.
Где я ошибся?

// кнопка Fullscreen

let btn = document.getElementById ("btn");    
let bd = document.querySelector ("body") 
 
     btn.addEventListener ("click", function (event) {
       bd.requestFullscreen();
       let target = event.target;
       target.style.background = "black";
          });

// создаём таблицу 

let elem = document.querySelector ("#elem");
createTable (elem, 5, 1);

function createTable(parent, cols, rows) {
	let table = document.createElement("table");
	
	for (let i = 0; i < rows; i++ ){
		let tr = document.createElement ("tr");
		
		for (let j = 0; j < cols; j++){
			let th = document.createElement("th");
			tr.appendChild(th);
		};
		table.appendChild(tr);
	};
	parent.appendChild(table);
	//return table;
};

// закрашиваем ячейки таблицы

const allProperty = [
    ["Red", "SF", "Crimson", "SF", "Tomato", "SF"],
	["Orange", "SF", "DarkOrange", "SF", "Yellow", "SF"],
	["Green", "SF", "DarkGreen", "SF", "Lime", "SF"],
    ["blue", "sound file SF", "navy", "SF", "cyan", "SF" ],
	["Purple", "SF", "DarkOrchid", "SF", "Violet", "SF"]
	];

let i;
let table = elem.querySelector ("table"); 
let unit = table.querySelectorAll ("th");

for (i = 0; i < 5; i++){
     unit[i].style.backgroundColor = allProperty[i][0];
};
	
	console.log (unit);

// создаём диалоговое окно

/*
let dialog = document.querySelector("dialog");
let unitOkno = dialog.querySelectorAll ("td");

  unit[2].addEventListener ("click", function() { 
  dialog.show();
  unitOkno[0].style.backgroundColor = allProperty[2][2];
  unitOkno[1].style.backgroundColor = allProperty[2][0];
  unitOkno[2].style.backgroundColor = allProperty[2][4];
});

  document.querySelector("#close").onclick = function() {
  dialog.close();
};

*/

let dialog = document.querySelector("dialog");
let unitOkno = dialog.querySelectorAll ("td");

  
 for (i = 0; i < 5; i++) {
  unit[i].addEventListener ("click", function() { 
  dialog.show();
  unitOkno[0].style.backgroundColor = allProperty[i][2];
  unitOkno[1].style.backgroundColor = allProperty[i][0];
  unitOkno[2].style.backgroundColor = allProperty[i][4];
  });
};

  document.querySelector("#close").onclick = function() {
  dialog.close();
};