Udacity Создатель пиксельной графики ⇐ CSS

[Гость]

Меня попросили создать программу для создания пиксельной графики, которая создает таблицу и позволяет пользователю раскрашивать ячейки, нажимая на них.
Я сделал это, и оно прошло 4 теста, но в последнем мне сообщили"
Pixel Art Project корректно работает с таблицами произвольного размера.
Истекло время повторной попытки: найдено слишком много элементов. Найдено «3», ожидалось «2».
хотя он работает правильно, когда я указываю случайный размер. высоту и ширину.

вот мой код:

< br />

Код: Выделить всё

var sumb = document.querySelector('#sizePicker [type="submit"]');
document;

var table = document.querySelector("#pixelCanvas");
var colpik = document.querySelector("#colorPicker");

function makeGrid() {

var hieght = document.querySelector("#inputHeight").value;
var width = document.querySelector("#inputWidth").value;

for (var row = 0; row < hieght; row++) {
tr = document.createElement("tr");
for (var cell = 0; cell < width; cell++) {
td = document.createElement("td");
tr.insertAdjacentElement("afterbegin",td)
}
table.insertAdjacentElement("afterbegin",tr)
}
}

sumb.addEventListener("click", function (event) {
event.preventDefault();
});
sumb.addEventListener("click", makeGrid);

table.addEventListener("click", function (event) {
if (event.target.tagName === "TD") {
var colval = document.querySelector("#colorPicker").value;
event.target.style.backgroundColor = colval;
}
});

Код: Выделить всё

body {
text-align: center;
}

h1 {
font-family: Monoton;
font-size: 70px;
margin: 0.2em;
}

h2 {
margin: 1em 0 0.25em;
}

h2:first-of-type {
margin-top: 0.5em;
}

table,
tr,
td {
border: 1px solid black;
}

table {
border-collapse: collapse;
margin: 0 auto;
}

tr {
height: 20px;
}

td {
width: 20px;
}

input[type="number"] {
width: 6em;
}

Код: Выделить всё

Pixel Art Maker!





Lab: Pixel Art Maker

Choose Grid Size

Grid Height:
 Grid Width:




Pick A Color


Design Canvas

Источник: https://stackoverflow.com/questions/673 ... -art-maker