[Vahan60]

Доброго времени суток всем.
Такой вот код:

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

let elem = document.querySelector('#elem');
createTable(elem, 3, 3);

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');
			th.className = "unit"; // присваиваем className
			tr.appendChild(th)
		};
		table.appendChild(tr)
	};
	parent.appendChild(table)
};

const alpha = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
const unit = document.getElementsByClassName("unit"); 

// вставляем элементы массива alpha в ячейки таблицы
for (i = 0; i < alpha.length; i++) {
	unit[i].append(alpha[i])
	};

let dial = document.getElementById("dial"); // находим диалоговое окно в index.html
let but = document.getElementById("but");   // находим кнопку закрытия окна в index.html
let activeUnit = -1;

for (i = 0; i < alpha.length; i++){
      unit[i].addEventListener("click", function() {
	  activeUnit = i; // запоминаем индекс ячейки по которому кликнули
	  console.log(activeUnit);
      dial.show();
      });

      but.addEventListener("click", function() {
      dial.close();
      })
};

Он должен создать таблицу, расставить по её ячейкам элементы массива, а затем (по клику на ту или другую ячейку) открыть диалоговое окно с соответствующим содержанием.
Для этого объявлена переменная activeUnit. И чтобы проверить, запомнил ли код по какой ячейке таблицы произведен клик, вывожу в консоль console.log(activeUnit).
Не запомнил. Вместо индекса ( от 0 до 8) в консоли печатается количество ячеек (9).
Более того, когда я закомментировал строки 30 и 31, то вместо того, чтобы выдать ошибку, код продолжает работать как ни в чём не бывало. По клику на ячейку открывает диалоговое окно.
Что за глюки?