如何循环输入类型的文本？答案

【问题标题】：How to loop the input type text?如何循环输入类型的文本？
【发布时间】：2013-11-16 00:12:17
【问题描述】：

我如何循环输入类型的文本，以便它可以拥有自己的独特属性，例如。名称，价值。我的意思是，例如 name="text1", name="text2",。类似的东西。这是我的代码。谢谢:)

<HTML>
    <HEAD>
    <TITLE></TITLE>
    <SCRIPT language="javascript">
    function add(type) {

        //Create an input type dynamically.
        var element = document.createElement("input");

        //Assign different attributes to the element.
        element.setAttribute("type", "text");
        element.setAttribute("value", "typhere");
        element.setAttribute("name", "txtbox");

        var btns = document.createElement("input");


        btns.setAttribute("type", "button" );
        btns.setAttribute("value", "delete");
        btns.setAttribute("name", "dlete");


        var foo = document.getElementById("fooBar");

        //Append the element in page (in span).

                foo.appendChild(element);
                foo.appendChild(btns);
                var br = document.createElement("br");
                foo.appendChild(br);

    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM>
    <H2></H2>

    <BR/>


    <INPUT type="button" value="Add" onclick="add(document.forms[0].value);"/>

    <span id="fooBar"><br/></span>

    </FORM>
    </BODY>
    </HTML>

【问题讨论】：

那么，您的意思是每次有人单击按钮时，都会执行 add 函数，并且每次您希望它使用不同的序列号作为创建元素的 ID？
首先，我将 JavaScript 从 HTML 标记中取出，这样更容易使其更健壮。然后将其绑定到输入的“点击”事件。

标签： javascript php html

【解决方案1】：

     var i=1;
   function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element    
   element.setAttribute("type", "text");
    element.setAttribute("value", "typhere"+i);
    element.setAttribute("name", "txtbox"+i);

    var btns = document.createElement("input");


    btns.setAttribute("type", "button" );
    btns.setAttribute("value", "delete"+i);
    btns.setAttribute("name", "dlete"+i);
    i++;

使用变量 i 来增加值。

【讨论】：

嗨，我已经这样做了，但它不会增加变量。我不知道为什么..hmm
它不会增加变量，因为例如，“text1”不是input 元素的有效type 属性。此外，这里没有循环。除非我在这里严重误解了这个问题。
这是javascript...有静态关键字吗？
这是我的代码 var txtLoop = 1; var element = document.createElement("input"); element.setAttribute("type", "text"); element.setAttribute("value", "typhere"); element.setAttribute("name", "txtbox" +txtLoop); txtLoop++;
在函数外使用 var i。

【解决方案2】：

试试这个：

var  counter=1;
function add(type) {

    //Create an input type dynamically.
    var element = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "typhere"+counter);
    element.setAttribute("name", "txtbox"+counter);

    var btns = document.createElement("input");


    btns.setAttribute("type", "button" );
    btns.setAttribute("value", "delete");
    btns.setAttribute("name", "dlete");


    var foo = document.getElementById("fooBar");

    //Append the element in page (in span).

            foo.appendChild(element);
            foo.appendChild(btns);
            var br = document.createElement("br");
            foo.appendChild(br);
            counter++;

}

演示：http://jsfiddle.net/kLJWW/

【讨论】：

【解决方案3】：

你可以这样做：

var inputId = 0;

function add(type){
   // do the stuff you have to do with inputId
   // input.setAttribute("name", "text" + inputId); for example
   inputId++;
}

如果你不想污染全局命名空间，你可以这样做：

(function(window){
  var inputId = 0;

  window.InputManager = {
     add : function(type){
         // do tuff with inputId
         // input.setAttribute("name", "text" + inputId); for example
         inputId++;
     }
  };
})(window);

然后

<input type="button" value="Add" onclick="InputManager.add(document.forms[0].value)"/>

【讨论】：

您的第一个解决方案是正确的，对不起，但我能够在阅读本文之前解决我的问题。我还没有尝试过你的第二个解决方案:)
没问题，我很高兴你的脚本现在可以工作了 ;) 我的第二个解决方案与第一个解决方案完全一样，但是将变量 inputId 从全局命名空间中隐藏起来，然后放将add 函数合并为一个新函数 (InputManager)，因此该函数也不会出现在全局命名空间中。