Доброго времени суток всем.
Такой вот код:
// создаём таблицу 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, то вместо того, чтобы выдать ошибку, код продолжает работать как ни в чём не бывало. По клику на ячейку открывает диалоговое окно.
Что за глюки?
