1

我被要求制作一个制作表格的像素艺术制作器，让用户通过单击它们为单元格着色。我成功了，它通过了 4 次测试，但在最后一次测试中它告诉我“Pixel Art Project 可以正常使用随机大小的表格重试超时：找到的元素太多。找到 '3'，预期为 '2'。” 即使当我放置随机高度和宽度时它可以正常工作。
这是我的代码：

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;
}
<!DOCTYPE html>
<html>

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

<body>
    <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">
    </form>

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

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

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

</html>

4

0 回答 0