Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Не считывается индекс (https://javascript.ru/forum/events/80620-ne-schityvaetsya-indeks.html)

Vahan60 01.07.2020 07:33

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

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

laimas 01.07.2020 09:25

https://learn.javascript.ru/event-delegation

voraa 01.07.2020 09:39

Почему в строке 9 вы пишите
for (let i=...
а дальше в циклах просто
for ( i= ...

Чему будет равно i выполнения цикла 34 - 44, когда при нажатии на ячейку сработает строка 36?

И зачем строки 41-43 помещать в цикл?

Vahan60 01.07.2020 13:14

Цитата:

Сообщение от voraa (Сообщение 526657)
Почему в строке 9 вы пишите
for (let i=...
а дальше в циклах просто
for ( i= ...

Спасибо огромное. Вчера весь день пялился в монитор, а "слона то и не приметил".


Часовой пояс GMT +3, время: 17:07.