New input field

[ivan3510]

Hi!
Sorry for my bad english.
I need help. I have a code (it's long so here's short version) that will, when I click on the button 1 (input field 1 and button 1), make a new input field and button with new name (input field2 and button 2) and in the input field 1 will write "broj1" (en. number1). Then, when I click on the button 2, in the input field 2 will write "broj2" (en. number2). That's all OK. The problem is, when I click on the button 2 (in the field 1 write "broj 1"), text in the input field 1 dissapears. What's wrong with my code.
Here's it:

<script type="text/javascript">
i=1;
x=0;
function zabiljezi(){
i=(i*1)+(1*1);
x=(x*1)+(1*1);
id="zabiljezi"+x;
document.getElementById('sve').innerHTML+=i+". <input type=\"text\" id=\"zabiljezi"+i+"\"> <input type=\"button\" value=\"Zabiljezi\" onclick=\"zabiljezi()\"><br>";
document.getElementById(id).value="broj"+x;
}
</script>
<div id="sve">
1. <input type="text" id="zabiljezi1">
<input type="button" value="Zabiljezi" onclick="zabiljezi();"><br>
</div>

Thank you all for your help.
PS: I hope you understand me.

[Taywin]

The problem is that you are rewriting the content of 'div' you are attempting to extend content. Also, it is a wrong way to dynamically extend HTML nodes in a page. The solution is not as simple as you though but it is not that difficult. You should create HTML elements and append them to 'sve' div instead.

One way to accomplish this is below. There are 2 parts I am not sure about because I have not tested the code. One is when a text node is created. I am not sure whether or not a new line is added. The other is when a button element is copied. I do not know if the function will behave the same in all browsers.

One note here that any button you click will extend the content. I still think that you should not need more than 1 button for extending content anyway... But I just revised the code according to your original code.

<script type="text/javascript">
var i=1;  // global variable
var x=0;  // no use for now

function zabiljezi() {
  i+=1;  // increment counter
  // add text node
  var newTxtNode = document.createElement("text");
  newTxtNode.value = i+". ";
  document.getElementById('sve').appendChild(newTxtNode);
  // add input text field element
  var newTxtElem = document.createElement("input");
  newTxtElem.type = "text";
  newTxtElem.id = "zabiljezi"+i;
  newTxtElem.value = "broj"+i;
  document.getElementById('sve').appendChild(newTxtElem);
  // clone and add button
  var newBtnElem = document.getElementById("clnBtn").cloneNode(false)
  newBtnElem.id = "clnBtn"+i;
  document.getElementById('sve').appendChild(newBtnElem);
  // add new line
  var newBrElem = document.createElement("br")
  document.getElementById('sve').appendChild(newBrElem);
}
</script>

<div id="sve">
1. <input type="text" id="zabiljezi1">
<input type="button" value="Zabiljezi" onclick="zabiljezi()" id="clnBtn"><br>
</div>

[ivan3510]

Thank you very much.