Udacity Pixel art maker

  css, dom-events, html, javascript, lab

I am asked to make a pixel art maker that makes a table and let’s the user color the cells by clicking on them.
I made it, and it passed 4 tests but in the last one it tells me"
Pixel Art Project works correctly with randomly sized tables
Timed out retrying: Too many elements found. Found ‘3’, expected ‘2’."
even though it works correctly when I put random height and width.

here’s my code:

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

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");

sumb.addEventListener("click", function (event) {
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;

td {
  border: 1px solid black;

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

tr {
  height: 20px;

td {
  width: 20px;

input[type="number"] {
  width: 6em;
<!DOCTYPE html>

    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">

    <h1>Lab: Pixel Art Maker</h1>

    <h2>Choose Grid Size</h2>
    <form id="sizePicker">
        Grid Height:
        <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
        <input type="number" id="inputWidth" name="width" min="1" value="1">
        <input type="submit">

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas"></table>

    <script src="designs.js"></script>


Source: Ask Javascript Questions