Question

我正在创建一段Javascript代码，您可以使用多个Answers创建多个问题。问题数量最多为20。当我点击“添加问题”时，它会添加一个带有两个答案的问题。当我填写一些输入字段并单击“添加问题”时，它会清空我的所有文本字段。这怎么可能？

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

问题在于，当你执行element.innerHTML + = ...时，你正在对页面上已存在的内容进行浅层复制，并将其重新插入为覆盖。所以你没有保留已输入的值。你应该做的是将新的dom元素附加到元素。

以下是如何从HTML字符串创建元素的链接：Creating a new DOM element from an HTML string using built-in DOM methods or prototype

如何将这些附加到元素：https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild

这样的事情可以解决问题:(可能需要一些调试）

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

Javascript，添加输入字段会清空所有其他输入字段

1 个答案: