如何根据用户的请求生成多个输入？答案

【问题标题】：How can I generate multiple inputs upon user's request?如何根据用户的请求生成多个输入？
【发布时间】：2019-11-23 08:27:00
【问题描述】：

我正在尝试根据用户的请求生成多个<input type=text>。换句话说，用户输入一个数字，例如n，因此<input type=text> 将在屏幕上出现n 次。

这是我的代码，不知何故基于此answer，但对我来说不能正常工作。

function generateInputs() {
  var count = document.getElementById("test");

  for (i = 0; i < Number(count); i++) {
      var input = document.createElement("input");
      input.setAttribute('type', 'text');
      var x = document.getElementsByClassName("testClass");
      x[0].appendChild(input)
  }
}

<body>
    <input type="number" id="test" min="2" max="20" required>
    <button onclick="generateInputs()">Test</button>

    <div class="testClass">    
    </div>
</body>

如果用户输入 2 并单击按钮，我希望看到例如 2 <input ...>，但没有显示任何内容。你介意让我知道我的错误吗？

【问题讨论】：

使用var count = document.getElementById("test").value

标签： javascript html

【解决方案1】：

您必须从 input 元素中获取 value。您也不需要在每次迭代中获取元素（到要进行追加的位置）：

var count = document.getElementById("test").value;

function generateInputs() {
  var count = document.getElementById("test").value;
  var x = document.getElementsByClassName("testClass");
  for (i = 0; i < Number(count); i++) {
    var input = document.createElement("input");
    input.setAttribute('type', 'text');
    x[0].appendChild(input)
  }
}

<body>
  <input type="number" id="test" min="2" max="20" required />
  <button onclick="generateInputs()">Test</button>
  <div class="testClass"></div>
</body>

【讨论】：

【解决方案2】：

你真的很亲密。问题是您没有正确计数。你得到的是元素，而不是它的值。加.value：

var count = document.getElementById("test").value;
// ----------------------------------------^^^^^^

还有一些其他的事情需要考虑：

你没有声明i，所以代码正在成为我称之为The Horror of Implicit Globals的牺牲品。声明你的变量。 :-)
最好只将value 从字符串转换为数字一次，而不是在循环的每次迭代中。
同样，没有理由每次都在循环中获取.testClass 元素。
type 被反映为一个元素属性，所以如果你喜欢，而不是
```
input.setAttribute('type', 'text');
```
你可以使用
```
input.type = 'text';
```

【讨论】：

离题了，但我觉得不可思议的是，20 多年后document.getElementById 仍在使用。如果我看到它在 2030 年或以后使用，我不会感到惊讶。
我想补充一点，这个答案中列出的大多数问题都可以通过使用 jshint 和 strict(er) 类型检查（通过 TypeScript 或 .jshintrc）来避免。