Javascript 使用 AppendChild 的 For 循环

Question

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

这里

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 进行声明。（最好是const）

Answer 3

有一些问题。这里我把子元素从<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>

Javascript 使用 AppendChild 的 For 循环

Javascript For Loop Using AppendChild

html

javascript

appendchild