用javascript填充动态表单

我正在尝试使用输入元素在表单之间运行forloop，并使用javascript动态创建表单

1：在场景一中，脚本中的表单在输入元素填充之前关闭

2：在场景2中，当我将for循环变量放在表单之间时，出现的错误是未定义的

请帮忙

情景一

费尔德一号
函数addfeilds1（）
{
var totalfeilds=document.getElementById（“numberoffeilds”）.value；
var i；
document.getElementById（“div4”）.innerHTML+=''；
对于（i=0；i，您需要首先在字符串中构建HTML元素，然后作为最后一步将它们添加到div中

固定场景1：

function addfeilds1()
{
   var totalfeilds = document.getElementById("numberoffeilds").value;
   var i;

   var htmlString = "";
   htmlString += '<form action= "issue.html" method = "POST">';

   for(i=0;i<totalfeilds;i++)
   {
       htmlString += '<input type = "text">';
   }

   htmlString += '<input type = "submit" value="submit" name="submit">';
   document.getElementById("div4").innerHTML = htmlString;
}

函数addfeilds1（）
{
var totalfeilds=document.getElementById（“numberoffeilds”）.value；
var i；
var htmlString=“”；
htmlString+=''；
对于（i=0；我不熟悉使用stackoverflow，我想暗示的是将其区分为两种不同的场景。我可以编辑此内容吗？谢谢adeno，我已经更正了。谢谢mouser…：）棒极了，伙计，现在开始工作了。kewlll…谢谢你，兄弟。这非常有用。再次感谢。@Sebastian看看解决方案3，这是一个非常干净的解决方案。再次感谢兄弟…第三个解决方案…是我必须花一些时间的东西…因为它现在对我来说是一个小的高级（我是编程新手），但是你的答案给了我很多新的东西要学习……谢谢你给我正确的方向：）这是快速学习的方法。一步一步地剖析代码。用谷歌搜索函数名。快乐的编码！
<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds2();"> 
</form>

<div id= "div4" style= "color:gray"></div> 

<script>
   function addfeilds2()
   {
      var totalfeilds = document.getElementById("numberoffeilds").value;
      var i;

      function forloop()
      {
          for(i=1 ;i<totalfeilds;i++)
          {
               document.getElementById("div4").innerHTML += '<input type = "text">';
          }
      }

      var loopvar = forloop();

      document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">'+
      '<input type = "text">'+
      loopvar + // it shows the loop as undefined
     '<input type = "text">'+
     '<input type = "text">'+
     '<input type = "submit" value="submit" name="submit">';

   }
</script>

function addfeilds1()
{
   var totalfeilds = document.getElementById("numberoffeilds").value;
   var i;

   var htmlString = "";
   htmlString += '<form action= "issue.html" method = "POST">';

   for(i=0;i<totalfeilds;i++)
   {
       htmlString += '<input type = "text">';
   }

   htmlString += '<input type = "submit" value="submit" name="submit">';
   document.getElementById("div4").innerHTML = htmlString;
}

  function forloop()
  {
      var htmlString = "";
      for(i=1 ;i<totalfeilds;i++)
      {
           htmlString  += '<input type = "text">';
      }
      return htmlString; // now forloop returns a string that can be added to the element. It no longers returns undefined.
  }

function addfeilds1()
{
    var totalFields = parseInt(document.getElementById("numberoffeilds").value); //parse integer from value
    if (isNaN(totalFields) || totalFields < 1)
    {
        //check if the input is valid, if not alert.
        alert("Value is not a valid number or lower than 1.");
    }

    var container = document.getElementById("div4");
    //create the form     
    var form = document.createElement("form");
    form.setAttribute("action", "issue.html");
    form.setAttribute("method", "POST");

    for(var i=0; i<totalFields; ++i)
    {
       var node = document.createElement("input");
       node.setAttribute("name", "field[]"); //this sends a array to the request page containing all input field values.
       form.appendChild(node); //add the fields to the form.
    }

    //create the submit button.
    var button = document.createElement("input");
    button.setAttribute("type", "submit");
    button.setAttribute("value", "submit");
    button.setAttribute("name", "submit");
    form.appendChild(button);

    container.appendChild(form); //append the form to the div.
}