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