Question

我正在尝试根据用户的请求生成多个<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 <input ...>，如果用户输入2并单击按钮，但是什么也没有显示。您介意让我知道我的错误吗？

Answer 1

您真的很亲密。事实是您没有正确获得计数。您得到的是元素，而不是其值。添加.value：

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

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

您并不是在声明i，因此代码已成为我所谓的The Horror of Implicit Globals的牺牲品。声明变量。：-）
最好将value从字符串转换为数字一次，而不是在循环的每次迭代中进行转换。
类似地，没有理由每次循环都获取.testClass元素。
type反映为元素属性，因此，如果愿意，可以代替
```
input.setAttribute('type', 'text');
```
您可以使用
```
input.type = 'text';
```

Answer 2

您必须从 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 个答案: