Question

我想知道如何制作它，以便在单击按钮并添加新的输入时，它不会代替旧的输入，而是出现在新的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;
}

Answer 1

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

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;
}

检查this link also

如何使每个新输入都出现在新框中

1 个答案: