Question

我正在为实验室作业创建一个像素艺术品制造商，而我目前正在尝试从用户表单（网格的输入高度和宽度）创建网格，但每当我调用函数在提交表单时创建网格，它不会将任何表格行附加到我的表格中。我现在可以使用jQuery轻松地完成它，但我试图在使用vanilla JS时变得更好。

编辑：我只是想获取行，然后为tds做循环。一步一步。

JS

function makeGrid(){
  //define grid height/width and pixelcanvas table
  var canvas = document.querySelector("#pixelCanvas");
  var height = document.querySelector("#inputHeight").value;
  var width = document.querySelector("#inputWidth").value;

  //remove all children from canvas so if makeGrid gets called again it cleans the canvas
  while (canvas.firstChild) {
    canvas.removeChild(canvas.firstChild);
  }

  //Loop for height and add tr to canvas
  for (x = 0; x > height; x++) {
    var row = document.createElement("<tr></tr>");
    canvas.appendChild(row);
  }

}

//Assign the form submit to a variable and put an eventlistener on click that runs makeGrid
// var submit = document.querySelector("#inputSubmit");

document.getElementById('sizePicker').addEventListener('submit', function(e){
  e.preventDefault;
  makeGrid();
})

HTML

<!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>

Answer 1

问题似乎是你的for循环;你有>从前到后。由于for (x = 0; x > height; x++)永远不会超过x，因此您的第0行永远不会执行。

只需将其交换为for (x = 0; x < height; x++)即可解决问题。

Answer 2

下面

WHERE t.code >= 'A2'
  AND ( t.code > 'A2' OR t.id > 2 )

你只是引用函数document.getElementById('sizePicker').addEventListener('submit', function(e){ e.preventDefault; makeGrid(); })，你没有调用它 - 为了防止表单提交，你需要实际调用函数：

e.preventDefault

我强烈建议不要像document.getElementById('sizePicker').addEventListener('submit', function(e){ e.preventDefault(); makeGrid(); })那样隐式创建全局变量。始终使用x，var或let声明。（最好是const）

Answer 3

有一些问题。在这里，我将子元素从tr更改为<tr></tr>。调用函数e.preventDefault()并修复循环条件。我还为列添加了额外的循环：

＆＃13;

function makeGrid() {
  //define grid height/width and pixelcanvas table
  var canvas = document.querySelector("#pixelCanvas");
  var height = document.querySelector("#inputHeight").value;
  var width = document.querySelector("#inputWidth").value;

  //remove all children from canvas so if makeGrid gets called again it cleans the canvas
  while (canvas.firstChild) {
    canvas.removeChild(canvas.firstChild);
  }
  //Loop for height and add tr to canvas
  for (x = 0; x < height; x++) {
    var row = document.createElement("tr");
    canvas.appendChild(row);

    for (z = 0; z < width; z++) {
      let cell = document.createElement('td')
      row.appendChild(cell)
    }
  }

}

//Assign the form submit to a variable and put an eventlistener on click that runs makeGrid
// var submit = document.querySelector("#inputSubmit");

document.getElementById('sizePicker').addEventListener('submit', function(e) {
  e.preventDefault();
  makeGrid();
})

＆＃13;

td {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
}

＆＃13;

<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>

＆＃13;

使用AppendChild进行循环的Javascript

3 个答案: