保持使用JavaScript動態添加文本字段的次數的計數

我試圖在點擊使用JavaScript的鏈接時動態地將新的文本字段添加到我的HTML表單中。每次點擊鏈接時，都會將新的文本字段插入到我的表單中。這裏是我的代碼實現此事件：保持使用JavaScript動態添加文本字段的次數的計數

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

其中第一次鏈接被點擊時，將是1，以便其相應的文本字段被命名爲handle1。對於其他文本字段也是如此;在第一個之後添加的文本字段將被命名爲handle2等等。

如何在我當前的JavaScript代碼中實現這一點？如果有人能爲此提供非JQuery解決方案，我將不勝感激。謝謝。

來源

2015-08-13 Manas Chaturvedi

請嘗試，如果這適用於你

<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的私有變量，並且不會污染全局範圍。

來源

2015-08-13 21:35:47 Novice

定義一個全局計數器，並同時呼籲增加它

<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>

來源

2015-08-13 21:23:16 joyBlanks

可以跳過障礙，但這是一個糟糕的設計選擇。 – Amit

@Amit你能否詳細說明爲什麼這是一個糟糕的設計選擇？ –

我同意，全局變量總是可以是一個艱難的壞事 – joyBlanks

那麼最簡單的方法是在全球範圍內建立一個變量，每次追加的新文本字段這樣

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); 
      }

時間增加它

污染全球範圍並不是一個很好的做法是JavaScript，但是這可能是最簡單的解決辦法替代這將創建一個閉包。

來源

2015-08-13 21:26:13 Novice

-1

您可以向創建的元素添加一個類並計算具有該自定義類的元素的數量。

代碼將

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); 
}

來源

2015-08-13 21:28:16

說明天我們有一個清除功能，你永遠不知道應該算什麼，說你有3個div現在你點擊你有div4現在你刪除第二個div然後點擊將再次創建div4。錯誤 – joyBlanks

保持你的增量變量的作用域包含會比使用全局變量更好，我建議是這樣的：

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

來源

2015-08-13 21:34:35

我看到大多數答案都會使用全局變量，我會說這可以是一個體面的使用。但是，使用HTML數據屬性的方法不同，這裏使用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>

來源

2015-08-13 21:44:37

保持使用JavaScript動態添加文本字段的次數的計數

回答

相關問題