Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.04.2020, 12:21
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 37

Закрашивание ячеек таблицы не лету
Доброго времени суток всем.
Пытаюсь сделать игрушку.
Есть таблица 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();
};
Ответить с цитированием
  #2 (permalink)  
Старый 20.04.2020, 12:40
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,002

У вас проблема с обращением к переменной 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];
});
};
Ответить с цитированием
  #3 (permalink)  
Старый 20.04.2020, 13:32
Аспирант
Отправить личное сообщение для Vahan60 Посмотреть профиль Найти все сообщения от Vahan60
 
Регистрация: 20.04.2020
Сообщений: 37

Большое спасибо. Заработало.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Закрашивание ячеек в таблице в зависимости от данных в ячейк Gradyslav Элементы интерфейса 39 16.11.2018 18:09
Вопрос по ширине ячеек таблицы demoniqus Общие вопросы Javascript 4 02.02.2014 12:19
Подсветка родительских ячеек таблицы Demath Элементы интерфейса 10 11.02.2013 13:33
IE 8: баг при динамическом display=none; у ячеек таблицы SegaMega Элементы интерфейса 0 21.09.2012 06:47
Не выводится содержимое ячеек таблицы SER Events/DOM/Window 2 23.06.2011 17:48