Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Закрашивание ячеек таблицы не лету (https://javascript.ru/forum/events/80035-zakrashivanie-yacheek-tablicy-ne-letu.html)

Vahan60 20.04.2020 12:21

Закрашивание ячеек таблицы не лету
 
Доброго времени суток всем.
Пытаюсь сделать игрушку.
Есть таблица 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();
};

voraa 20.04.2020 12:40

У вас проблема с обращением к переменной i.
Она глобальна по отношению к функциям, которые создаются внутри цикла. И в конце цикла принимает значение 6.
Надо так
let i; в 43 строке

Строки 47-49
for (let i = 0; i < 5; i++){
unit[i].style.backgroundColor = allProperty[i][0];
};

Строки 76-83
for (let 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];
});
};

Vahan60 20.04.2020 13:32

Большое спасибо. Заработало.


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