如何创建从输入字段获得的div元素数量

Question

我需要创建名称生成器。我有一个输入字段，我需要用户输入数字> 0并在文档中创建这样的div数。

let nums = parseInt(document.querySelector('.num').value);

function assign() {
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${nums[i]}</div>`;
    document.body.appendChild(box);
  }
}

.boxList {
  border: 1px solid red;
  padding: 10px;
}

<input type="number" class="num" placeholder="enter num of groups">
<input type="button" id="assign" onclick="assign()" value="Assign">

控制台不显示任何问题！

Answer 1

您在脚本加载后立即设置nums。在这个时候，该字段不可能有值。

将let语句移至函数中，以便在函数运行时它将收集输入框的值（表面上该字段由用户完成。）>

function assign() {
  let nums = parseInt(document.querySelector('.num').value);
  for (i = 0; i < nums; i++) {
    let box = document.createElement('div');
    box.classList.add('boxList');
    box.innerHTML = `<div>Group ${nums[i]}</div>`;
    document.body.appendChild(box);
  }
}
.boxList {
  border: 1px solid red;
  padding: 10px;
}
<input type="number" class="num" placeholder="enter num of groups">
<input type="button" id="assign" onclick="assign()" value="Assign">