Javascript, adding input fields empties all other input fields

Question

I'm creating a piece of Javascript code where you can create multiple Questions with multiple Answers. The amount of questions is 20 at most. When I click "Add question" it adds a question with two answers. When I fill in some of the input fields and click "Add question", it empties all my text fields. How is this possible?

var fields = 0;
var qAmount = 0;
var array = new Array();

function addInput() {
  if (fields != 2) {
    qAmount++;
    var element = document.getElementById('texty');
    element.innerHTML += "" +
      "<label>Question " + qAmount + "</label><span class='field'><input type='text' class='longinput' name='question" + qAmount + "' /></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-1' /> <input type='text' name='answer" + qAmount + "-1'> Answer 1</input></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-2' /> <input type='text' name='answer" + qAmount + "-2'> Answer 2</input></span>" +
      "<div id='a" + qAmount + "'></div><br/>" +
      "<span class='field'><a style='cursor: pointer' onclick='addAnswer(" + qAmount + ")'>Add answer</a></span><br /><br />";
       fields += 1;
       array[qAmount] = 2;
  }
}

score 3 · Accepted Answer · edited May 23 '17 at 11:56

The problem is that when you do element.innerHTML += ... You're doing a shallow copy of what already exists on the page and the reinserting it as an overwrite. So you're not keeping the already entered values. What you should do instead is append the new dom elements to element.

Here's a link to how to create elements from an HTML string: Creating a new DOM element from an HTML string using built-in DOM methods or prototype

And how to append those to an element: https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

Something like this should do the trick: (May require some debugging)

var fields = 0;
var qAmount = 0;
var array = new Array();
var element = document.getElementById('texty');

function addInput() {
  var div, s;
  if (fields != 2) {
    qAmount++;
    s = "<label>Question " + qAmount + "</label><span class='field'><input type='text' class='longinput' name='question" + qAmount + "' /></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-1' /> <input type='text' name='answer" + qAmount + "-1'> Answer 1</input></span>" +
      "<span class='field'><input type='radio' name='question" + qAmount + "-correctanswer' value='answer" + qAmount + "-2' /> <input type='text' name='answer" + qAmount + "-2'> Answer 2</input></span>" +
      "<div id='a" + qAmount + "'></div><br/>" +
      "<span class='field'><a style='cursor: pointer' onclick='addAnswer(" + qAmount + ")'>Add answer</a></span><br /><br />";
       div = document.createElement('div');
       div.innerHTML = s;
       element.appendChild(div);
       fields += 1;
       array[qAmount] = 2;
  }
}

I am trying to find out how to do it, but you're saying "append the new dom elements to element". I'm kind of new in Javascript (this is, I think, my second piece of code I've ever written).. Could you give a little push in the right direction? — Stefan Schouten, Jan 14 '13 at 22:12
Working like it should! Thanks a lot! I see how this works now. — Stefan Schouten, Jan 14 '13 at 22:27

Javascript, adding input fields empties all other input fields

1 Answers1