如何使每个新输入显示在新框中

我想知道如何制作它，这样当点击按钮并添加新的输入时，它不会取代旧的输入，而是出现在一个新的bix中，离开旧的输入。

<!DOCTYPE html>
<html>
<body>
<div id="itemcreator" class="itm">
<form id="form1">
<!--where the user inputs the item-->
Item: <input name="item" type="text" size="20">
</form>
<button onclick="outputname()">Add</button>
</div>

<div class="box" id="duplicater"> 
<p id="output"></p>
</div>

<script type="text/javascript">

var i = 0;
var original = document.getElementById('duplicater');

复制功能

function duplicate() {
i = i + 1;
var clone = original.cloneNode(true); 
clone.id = "duplicetor" + ++i;  
original.parentNode.appendChild(clone);
}

函数输出项目。

function outputname() {
var x=document.getElementById("form1") ;
item = x.elements.namedItem("item").value;
if (item !== ""){
document.getElementById("output").innerHTML=item;
duplicater.style.display = "block";
document.getElementById("addTrade").style.left = "7px";
itemMkrWindow.style.display = "none";
}
} 
</script>

.box {
display: none;
border-radius: 5px;
border-width: 1px;
border-color: black;
border-style: solid;
}

无法获得您想要做的事情，但这可能会有所帮助：

var i = 0;
var original = document.getElementById('duplicater');
function duplicate() {
i = i + 1;
var clone = original.cloneNode(true); 
clone.id = "duplicetor" + ++i;  
original.parentNode.appendChild(clone);
}
function outputname() {
var x=document.getElementById("form1") ;
item = x.elements.namedItem("item").value;
if (item !== ""){
var createdItem = document.createElement('P');
createdItem.setAttribute('id', 'output');
var text = document.createTextNode(item);
createdItem.appendChild(text);
var container = document.getElementById("duplicater");
container.appendChild(createdItem);
}
}

这将是CSS:

.box {
border-radius: 5px;
border-width: 1px;
border-color: black;
border-style: solid;
}
#output{
display: block;
background-color: red;
width: 100px;
height: 50px;
}

也检查这个链接

相关内容

最新更新

热门标签：