Question

在这里，我正在尝试基于用户输入构建表。但是我的代码无法正常工作。不明白主要问题是什么！我一直在搜索数小时，但找不到一直在寻找的答案。如果有人帮助，对我来说太好了！谢谢

这是我的HTML代码。

<h1>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" id="submit">
    </form>

    <h2>Pick A Color</h2>
    <input type="color" id="colorPicker">

    <h2>Design Canvas</h2>
    <table id="pixelCanvas">
        <tbody id="tbody">

        </tbody>

    </table>

这是我的Js代码

const height = document.querySelector("#inputHeight").value;
const width  = document.querySelector("#inputWidth").value;
const table = document.querySelector("#pixelCanvas");
const tBody = document.querySelector("#tbody");
const color = document.querySelector("#colorPicker").value;
const form = document.querySelector("#sizePicker");


// Event Listener
form.addEventListener('submit', makeGrid);





// makeGrid function

function makeGrid(event) {

    // Preventing from reloading
     event.preventDefault();




    // For Loop for rows

    for(var i=1; i<height;i++){


        const row = document.createElement("tr");

// For Loop for column

        for(var i=1; i<width; i++){
            const cell = document.createElement("td");
            row.appendChild(cell);


        }
        tBody.appendChild(row);
    }


}

Answer 1

您将获得这两个

const height = document.querySelector("#inputHeight").value; const width = document.querySelector("#inputWidth").value;

在执行功能之前。因此，将永远不会获得更新的输入。其次，td为空，这就是为什么您无法查看它的原因。将index添加为td文本

const table = document.querySelector("#pixelCanvas");
const tBody = document.querySelector("#tbody");
const color = document.querySelector("#colorPicker").value;
const form = document.querySelector("#sizePicker");

form.addEventListener('submit', makeGrid);

function makeGrid(event) {
  event.preventDefault();
  const height = document.querySelector("#inputHeight").value;
  const width = document.querySelector("#inputWidth").value;
  for (var i = 1; i < height; i++) {
    const row = document.createElement("tr");
    for (var i = 1; i < width; i++) {
      let k = document.createTextNode(i);
      const cell = document.createElement("td");
      cell.appendChild(k)
      row.appendChild(cell);
    }
    tBody.appendChild(row);
  }
}

<h1>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" id="submit">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas" border='1px solid black'>
  <tbody id="tbody">

  </tbody>

</table>

Answer 2

使用repeat()方法

注意：height和width分配给没有值的元素。这样一来，即使它被更改，我们也可以稍后获取它的值。

const height = document.querySelector("#inputHeight");
const width = document.querySelector("#inputWidth");
const table = document.querySelector("#pixelCanvas");
const tBody = document.querySelector("#tbody");
const color = document.querySelector("#colorPicker");
const form = document.querySelector("#sizePicker");


// Event Listener
form.addEventListener('submit', makeGrid);

// makeGrid function
function makeGrid(event) {
  // Preventing from reloading
  event.preventDefault();

  let cells = "<td></td>".repeat(width.value);
  let rows = `<tr>${cells}</tr>`.repeat(height.value);

  tBody.innerHTML = rows;
}

#tbody td {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
}

<h1>Pixel Art Maker</h1>

<h2>Choose Grid Size</h2>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="2"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="2">
  <input type="submit" id="submit">
</form>

<h2>Pick A Color</h2>
<input type="color" id="colorPicker">

<h2>Design Canvas</h2>
<table id="pixelCanvas">
  <tbody id="tbody"></tbody>
</table>

Javascript：使用用户输入创建表的更好解决方案？

2 个答案: