Javascript For Loop Using AppendChild

Question

I'm creating a pixel art maker right now for a lab assignment and I'm currently trying to create a grid from a user form (input height and width of the grid), but whenever I call the function to create the grid on the submission of the form it isn't appending any table rows to my table. I can currently do it easily using jQuery, but I am trying to become better at just using vanilla JS.

EDIT: I am just trying to get rows then do the loop for the tds. One step at a time.

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>

Please try using the debugging capabilities of your browser. Rubber Duck Debug your code. — Sebastian Simon
– Sebastian Simon, Commented Apr 23, 2018 at 3:12
As mentioned by Obsidian Age in his answer, your for loop condition isn't quite right. In order to help avoid the situation in the future: the second parameter to the for loop condition says "execute this for loop while this condition is true". I'm going to guess that maybe you had written it with the intention that once this condition is met, break the for loop? — Denno
– Denno, Commented Apr 23, 2018 at 3:12
There's more than one problem: e.preventDefault should be e.preventDefault(). You need to add tr elements not <tr></tr> elements. Also the loop condition mentions by @obsidianAge. This will get you as far as adding rows to the table. — Mark
– Mark, Commented Apr 23, 2018 at 3:16

Obsidian Age · Accepted Answer · 2018-04-23 03:09:52Z

3

The problem appears to be your for loop; you have the > back-to-front. Your line
for (x = 0; x > height; x++) will never execute, as x will never be greater than 0.

Simply swapping this to for (x = 0; x < height; x++) should solve the problem.

answered Apr 23, 2018 at 3:09

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Camp Over a year ago

Haha such a simple mistake. Thank you so much.

Mark · Accepted Answer · 2018-04-23 03:23:25Z

There are a few problems. Here I change the child element to tr from <tr></tr>. Call the function e.preventDefault() and fixed the loop condition. I also added the extra loop for columns:

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>

CertainPerformance · Accepted Answer · 2018-04-23 03:21:51Z

0

Here

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

You're simply referencing the function e.preventDefault, you're not calling it - in order to prevent form submission, you need to actually call the function:

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

I would also highly recommend not implicitly creating global variables as you're doing for x. Always declare using var, let, or const. (preferably const)

edited Apr 23, 2018 at 3:21

answered Apr 23, 2018 at 3:18

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Collectives™ on Stack Overflow

Javascript For Loop Using AppendChild

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related