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

Answer 1

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