单击以添加隐藏的输入； 如何编写可以添加无限新输入的函数？

Question

我有以下代码。 单击“添加更多”时，它将显示一个隐藏的输入文本区域。 如何将其放入函数中，然后我可以单击无限期添加？ 我尝试过，但没有成功。 谢谢！

 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> 

Answer 1

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

 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>