My table displays and then disappears after I click submit

I am trying to build a 2-dimensional table where width = x, and height = y. I'm almost there, but when I click the submit button, the desired x,y table displays and then disappears after I click submit. I tried running makeGrid(5, 5); at the end of the JS file, i.e. manually adding in values for makeGrid(h, w), and the table displays and does not go away. But I need to be able to have the table construct from the submit button without disappearing.

Please help. Thank you!!

I believe the main issue is just with the JavaScript portion but I included all three (html, css, js) just to be comprehensive.

Image of three different states of the webpage, from left to right (before click, immediately after clicking submit, and moments after clicking submit

var color, h, w;

const myTable = document.querySelector('#pixelCanvas');

function colorCell(event) {
  event.target.style.backgroundColor =
    document.querySelector('#colorPicker').value;
}

function makeGrid(h, w) {
  for (let i = 1; i <= h; i++) {
    const newTR = document.createElement('tr'); // Creates height amount of rows
    for (let i = 1; i <= w; i++) {
      const newTD = document.createElement('td'); // Creates width amount of columns
      newTR.appendChild(newTD);
    }
    myTable.appendChild(newTR); // Adds the row to the table before iterating again
  }
}

myTable.addEventListener('click', colorCell);

let form = document.querySelector('form');
form.addEventListener('submit', function submitFunction() {
  h = document.querySelector('#inputHeight').value;
  w = document.querySelector('#inputWidth').value;
  makeGrid(h, w);
});

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>Pixel Art Maker</h1>
    <h2>Choose Your Grid Size</h2>
    <h4>(to reset, click Submit again)</h4>
    <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>Choose Any Color</h2>
    <input type="color" id="colorPicker" />

    <h2>Create your art in the table below!</h2>
    <table id="pixelCanvas"></table>

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

Solution

You should prevent the browser's default submit event by using e.preventDefault() and e is passed to the submitFunction().

form.addEventListener('submit', function submitFunction(e) {
  e.preventDefault();
  h = document.querySelector('#inputHeight').value;
  w = document.querySelector('#inputWidth').value;
  makeGrid(h, w);
});

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Result (in Code Snippet):

var color, h, w;

const myTable = document.querySelector('#pixelCanvas');

function colorCell(event) {
  event.target.style.backgroundColor =
    document.querySelector('#colorPicker').value;
}

function makeGrid(h, w) {
  myTable.innerHTML = '';
  for (let i = 1; i <= h; i++) {
    const newTR = document.createElement('tr'); // Creates height amount of rows
    for (let i = 1; i <= w; i++) {
      const newTD = document.createElement('td'); // Creates width amount of columns
      newTR.appendChild(newTD);
    }
    myTable.appendChild(newTR); // Adds the row to the table before iterating again
  }
}

myTable.addEventListener('click', colorCell);

let form = document.querySelector('form');

form.addEventListener('submit', function submitFunction(e) {
  e.preventDefault();
  h = document.querySelector('#inputHeight').value;
  w = document.querySelector('#inputWidth').value;
  makeGrid(h, w);
});

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>Pixel Art Maker</h1>
    <h2>Choose Your Grid Size</h2>
    <h4>(to reset, click Submit again)</h4>
    <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>Choose Any Color</h2>
    <input type="color" id="colorPicker" />

    <h2>Create your art in the table below!</h2>
    <table id="pixelCanvas"></table>

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