单击以添加隐藏的输入;我怎样才能写出一个可以添加无限新输入的函数呢



我有以下代码。当点击"添加更多"时,它会显示一个隐藏的输入文本区域。怎么说在一个函数中,那么我可以无限期地点击添加更多吗?我试过了,但没有成功。谢谢

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>

与其从一开始就对每个输入进行编码,不如使用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>

最新更新