时间戳

首页 > 解决方案 > 如何根据用户的请求生成多个输入？

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

问题描述

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

这是我的代码，它以某种方式基于这个答案，但对我来说不能正常工作。

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 并单击按钮，但没有显示任何内容。你介意让我知道我的错误吗？

标签： javascripthtml

解决方案

你真的很亲近。问题是您没有正确计数。你得到的是element，而不是它的value。添加.value：

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

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

  1. 你没有声明，所以代码正在成为我所说的隐式全局恐怖的i牺牲品。声明你的变量。:-)

  2. 最好只将value字符串转换为数字一次，而不是在循环的每次迭代中。

  3. 同样，没有理由.testClass每次都在循环中获取元素。

  4. type反映为元素属性，所以如果你喜欢，而不是

    input.setAttribute('type', 'text');

    您可以使用

    input.type = 'text';

推荐阅读