我的 table 在我点击提交后显示然后消失

Question

我正在尝试构建一个二维 table，其中宽度 = x，高度 = y。我快到了，但是当我单击提交按钮时，所需的 x,y table 会显示，然后在我单击提交后消失。我试过运行 makeGrid(5, 5);在 JS 文件的末尾，即手动添加 makeGrid(h, w) 的值，并且 table 显示并且不会消失。但是我需要能够从提交按钮中构造 table 而不会消失。

请帮忙。谢谢！！

我认为主要问题在于 JavaScript 部分，但为了全面起见，我将所有三个部分（html、css、js）都包括在内。

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>

Answer 1

您应该使用 e.preventDefault() 阻止浏览器的默认提交事件并将 e 传递给 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

结果（在代码段中）：

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>

我的 table 在我点击提交后显示然后消失

My table displays and then disappears after I click submit

javascript

html

css

click

submit

结果（在代码段中）：