点击添加隐藏的输入;我如何编写一个可以添加无限新输入的函数？

我有以下代码。当点击“添加更多”时，它会显示一个隐藏的输入textarea。如何把它放在一个函数中，然后我可以点击添加更多的无限期？我试过了，但没有成功。谢谢！点击添加隐藏的输入;我如何编写一个可以添加无限新输入的函数？

function HideContent(d) { 
 
document.getElementById('cng').style.display = "block"; 
 
document.getElementById('cng').innerHTML='Click to show.'; 
 
document.getElementById(d).style.display = "none"; 
 
} 
 
function ShowContent(d, s) { 
 
document.getElementById(s).style.display = "none"; 
 
document.getElementById(d).style.display = "list-item"; 
 
} 
 
function ReverseDisplay(d) { 
 
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } 
 
else { document.getElementById(d).style.display = "none"; } 
 
}

<form> 
 
<input type="textarea" name="user3"> 
 
<a href="javascript:ShowContent('uniquename1', 'cng1')" backgorund="orange"> 
 
<div id="cng1" style="display">Click to add more.</div> 
 
</a> 
 

 
<div id="uniquename1" style="display:none;"> 
 
<input type="textarea" name="user1"> 
 
<a href="javascript:ShowContent('uniquename2', 'cng2')"> 
 
<div id="cng2" style="display">Click to add more</div> 
 
</a> 
 
</div> 
 

 
<div id="uniquename2" style="display:none;"> 
 
<input type="textarea" name="user2"> 
 
<a href="javascript:ShowContent('uniquename3', 'cng3')"> 
 
<div id="cng3" style="display">Click to add more</div> 
 
</a> 
 
</div> 
 

 
<br><input type="submit"> 
 
</form>

来源

2014-10-09 user2607925

而不是从一开始编码每个输入，您应该动态地使用createElement的JS函数来创建它们：

var inputNumber = 0, 
 
    
 
    inputHolder = document.getElementById("inputHolder"), 
 
    
 
    addInput = function() { 
 
    // Creates new input 
 
    var myNewBox = document.createElement("input"); 
 

 
    // Gives the unique name to the input 
 
    myNewBox.setAttribute("name", "cng" + inputNumber); 
 

 
    // Adds one so the next input will get a new name 
 
    inputNumber++; 
 

 
    // Adds the new box to the input holder, plus a br tag 
 
    inputHolder.appendChild(myNewBox); 
 
    inputHolder.appendChild(document.createElement("br")); 
 
    }; 
 

 
// Adds the initial input box 
 
addInput();

<form> 
 

 
    <div id="inputHolder"></div> 
 

 
    <br/> 
 

 
    <a href="javascript:addInput()">Add another?</a> 
 

 
    <br/> 
 

 
    <br/> 
 
    <input type="submit"> 
 
</form>

来源

2014-10-09 17:05:23

嗨，这是正是我需要的。但是我把你的代码放在一起，然后运行它。它不适合我。请参阅下面的帖子。 – user2607925 2014-10-09 17:36:52

它在上面的代码片段中为我运行，它不需要任何jQuery。在下面的转贴中，您是否将JS和HTML分开，或者将其全部粘贴到同一部分？ – 2014-10-09 18:05:43

我不知道为什么它不适合我。我的代码完全像我的帖子。它在一个文件中。我将JS与

点击添加隐藏的输入;我如何编写一个可以添加无限新输入的函数？

回答

相关问题