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