Как сделать так, чтобы каждый новый вход появлялся в новом окне? - PullRequest
0 голосов
/ 26 ноября 2018

Я хочу знать, как сделать так, чтобы при нажатии кнопки и добавлении нового ввода он не заменял старый, а появлялся в новом биксах, оставляя старый.

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

1 Ответ

0 голосов
/ 26 ноября 2018

Не могу получить то, что вы пытаетесь сделать, но, возможно, это поможет:

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

проверьте эта ссылка также

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...