Question

我正在尝试使用JavaScript在点击链接时动态地将新文本字段添加到我的HTML表单中。每次点击链接，新的文本字段都会插入到我的表单中。这是我实现此事件的代码：

HTML

<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>

的JavaScript

function addNewCeleb()
        {
                var celeb = document.createElement("input");
                celeb.type = "text";
                celeb.name = "handle";
                celeb.placeholder = "Twitter handle";
                celebrity.appendChild(celeb);
        }

现在，我想要一种方法来记录链接被点击的次数，因为我想区分每个文本字段的名称，如下所示：

celeb.name = "handle" + count

首次点击链接时count为1，以便其相应的文字字段命名为handle1。同样对于其他文本字段也是如此;在第一个之后添加的文本字段将命名为handle2，依此类推。

如何在我当前的JavaScript代码中实现此功能？如果有人可以为此提供非JQuery解决方案，我将不胜感激。感谢。

Answer 1

定义全局计数器，同时调用增量

<script>
  function addNewCeleb(){
     var celeb = document.createElement("input");
     var container = document.getElementById('celebrity');
     var lastNode = container.childNodes[container.childNodes.length-1] ;
     var count = lastNode && lastNode.nodeName.toLowerCase() === 'input' ? parseInt(lastNode.name.replace('handle',''))+1 : 1;
     celeb.type = "text";
     celeb.name = "handle"+count;
     celeb.placeholder = "Twitter handle";
     container.appendChild(celeb);
  }
</script>

<body>
  <a onclick = "addNewCeleb()">Add a Microceleb</a>
  <div id = "celebrity"/>
</body>

Answer 2

最简单的解决方案是在全局范围内创建一个变量，并在每次附加这样的新文本字段时递增它

var index = 0;   
 function addNewCeleb()
            {
                    index += 1;
                    var celeb = document.createElement("input");
                    celeb.type = "text";
                    celeb.name = "handle" + index;
                    celeb.placeholder = "Twitter handle";
                    celebrity.appendChild(celeb);
            }

规范全局范围不是一个非常好的做法，但是这可能是最简单的解决方案，替代方案就是创建一个闭包。

Answer 3

保持增量变量的范围比使用全局变量更好，我建议如下：

var addNewCeleb = function() {
  var count = 0;

  return function() {
    count++;
    var celeb = document.createElement("input");
    celeb.type = "text";
    celeb.name = "handle"+count;
    celeb.placeholder = "Twitter handle";
    document.getElementById('celebrity').appendChild(celeb);
  }
}();

Fiddle

Answer 4

如果这对您有用，请尝试

<a onclick = "addNewCeleb()">Add a Microceleb</a>
<div id = "celebrity"/>

    function addNewText()
                {
         var index=0;
         return  function(){ 
                        index += 1;
                        var celeb = document.createElement("input");
                        celeb.type = "text";
                        celeb.name = "handle" + index;
                        celeb.placeholder = "Twitter handle";
                        celebrity.appendChild(celeb);
                      }
          }
    var addNewCeleb= new addNewText();

这将为索引变量创建一个私有作用域，没有人可以更改它，然后它将成为addNewText的私有变量，并且也不会污染全局作用域。

Answer 5

我看到大多数答案都使用全局变量，我会说这可以是一个不错的用法。但是，这是使用HTML数据属性

的不同方法

<script>
    function addNewCeleb(){
     var myLink= document.getElementById('myLink');
     var counter =Number(myLink.getAttribute('data-counter'));
     var celeb = document.createElement("input");
     counter+=1;   
     celeb.type = "text";
     celeb.name = "handle"+counter;
     celeb.placeholder = "Twitter handle";
     celebrity.appendChild(celeb);
     myLink.setAttribute('data-counter',counter);
    }
</script>

<body>
  <a id="myLink" data-counter="0" onclick = "addNewCeleb()">Add a Microceleb</a>
  <div id = "celebrity"/>
</body>

Answer 6

您可以向创建的元素添加一个类，并计算具有该自定义类的元素数。

代码将是

function addNewCeleb()
{

        var celeb = document.createElement("input");
        var celebrity = document.getElementById("celebrity");
        var count = document.querySelectorAll('.specific-class').length;
        celeb.type = "text";
        celeb.name = "handle" + count;
        celeb.class = "specific-class"
        celeb.placeholder = "Twitter handle";
        celebrity.appendChild(celeb);
}

保持使用JavaScript动态添加文本字段的次数

6 个答案: