javascript - 我希望我的代码创建由具有输入数量的行和列的 block 组成的网格

Question

我有 2x 数字输入和函数，它应该创建具有 x 行和 y 列的网格，但是当我单击按钮时没有任何反应。

完整代码:

var ground = document.getElementById("ground")
  function getHV() {
  var x = Number(document.getElementById("h").value);
  var y = Number(document.getElementById("v").value);
  for (y; y > 0; y--) {
  for (x; x > 0; x--) {
    blocks = "block" + x;
    blocks = document.createElement("div");
    ground.appendChild(blocks);
    blocks.backgroundcolor = "black";
    blocks.style.height = 50 + "px";
    blocks.style.width = 50 + "px";
    };
  } 
}

#ground {
background-color: lightblue;
width:345px;
height:450px;
}

<input type="number" id="h" value="10"/>
<input type="number" id="v" value="10"/>
<button id="submit" onclick="getHV();">Submit</button>
<div id="ground"></div>

Answer 1

x 和 y 是字符串。您需要将它们转换为数字，但是一旦您使用 x--，它无论如何都会转换为数字。

你有一些逻辑问题，但总的来说它是有效的......它们只是不可见。

var ground = document.getElementById("ground")

function getHV() {
  let x = Number(document.getElementById("h").value);
  let y = Number(document.getElementById("v").value);
  for (y; y > 0; y--) {
    for (x; x > 0; x--) {
      const block = document.createElement("div");
      block.innerText = "block" + x;
      block.backgroundcolor = "black";
      block.style.height = 50 + "px";
      block.style.width = 50 + "px";
      ground.appendChild(block);
    };
  }
}

<input type="number" id="h" value="10" />
<input type="number" id="v" value="10" />
<button id="submit" onclick="getHV();">Submit</button>
<div id="ground"></div>