Javascript:生成自定义数量的 TextAreas

Question

对于我的小项目，我想要 TextAreas，并且应该在 for 循环中生成 textAreas。

<小时/>

HTML

<h2>Settings for new Code:</h2>

<p>Amount of Checks:</p>
<input id="NumOfButtons"
       name="NumOfButtons"
       pattern=""
       size="30"
       spellcheck="false"
       title="amount of Checks"
       value="">

<script>

    let input = document.getElementById("NumOfButtons");
    input.addEventListener("keyup", function (event) {
        let listTA;
        if (event.keyCode === 13) {
            event.preventDefault();
            var x = parseInt(document.getElementById("NumOfButtons").value);
            listTA = new Array(x);
            for (let i = 0; i < x; ++i) {
                var textarea = document.createElement("textarea");
                textarea.name = "TextArea";
                textarea.maxLength = "100";
                listTA[i] = textarea;
                input.appendChild(textarea);
            }
        }
    });
</script>

输出应该是已输入到现有文本区域中的文本区域数量。

Answer 1

答案很简单:HTML <input>元素不是容器 - 它不能容纳子元素。 相反，您想要做的是创建一个空的 <div>并将文本区域附加到其中。

let input = document.getElementById("NumOfButtons");
input.addEventListener("keyup", function(event) {
  let listTA;
  if (event.keyCode === 13) {
    event.preventDefault();
    var x = parseInt(document.getElementById("NumOfButtons").value);
    listTA = new Array(x);
    for (let i = 0; i < x; ++i) {
      var textarea = document.createElement("textarea");
      textarea.name = "TextArea";
      textarea.maxLength = "100";
      listTA[i] = textarea;
      document.getElementById("theDiv").appendChild(textarea);
    }
  }
});

<h2>Settings for new Code:</h2>

<p>Amount of Checks:</p>
<input id="NumOfButtons" name="NumOfButtons" pattern="" size="30" spellcheck="false" title="amount of Checks" value="">
<div id="theDiv">
</div>