Question

使用 AppendChild 的 Javascript For 循环

2018-04-23

1270

javascript html appendchild

我现在正在为实验室作业创建一个像素艺术制作器，我目前正尝试从用户表单创建网格（输入网格的高度和宽度），但每当我调用函数在提交表单时创建网格时，它都不会将任何表格行附加到我的表格中。我目前可以使用 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

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

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();
})

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

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

Answer 3

在这里 - 为了防止表单提交，您需要实际调用该函数： 399682746

我也强烈建议您不要隐含地创建全局变量，因为您正在为 做 X 。始终使用 var ， LET 或 const 来声明。（最好是 const ）