点击添加隐藏的输入;我如何编写一个可以添加无限新输入的函数?
问题描述:
我有以下代码。当点击“添加更多”时,它会显示一个隐藏的输入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>
答
而不是从一开始编码每个输入,您应该动态地使用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>
嗨,这是正是我需要的。但是我把你的代码放在一起,然后运行它。它不适合我。请参阅下面的帖子。 – user2607925 2014-10-09 17:36:52
它在上面的代码片段中为我运行,它不需要任何jQuery。在下面的转贴中,您是否将JS和HTML分开,或者将其全部粘贴到同一部分? – 2014-10-09 18:05:43
我不知道为什么它不适合我。我的代码完全像我的帖子。它在一个文件中。我将JS与