2

複数の回答を持つ複数の質問を作成できる Javascript コードを作成しています。問題数は最大20問。「質問を追加」をクリックすると、2 つの回答を持つ質問が追加されます。いくつかの入力フィールドに入力して [質問を追加] をクリックすると、すべてのテキスト フィールドが空になります。これはどのように可能ですか？

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

1 に答える 1

3

問題は、 element.innerHTML += ... を実行すると、ページに既に存在するものの浅いコピーを実行し、それを上書きとして再挿入していることです。したがって、すでに入力されている値を保持していません。代わりにすべきことは、新しい dom 要素を要素に追加することです。

HTML 文字列から要素を作成する方法へのリンクは次のとおりです:組み込みの DOM メソッドまたはプロトタイプを使用して HTML 文字列から新しい DOM 要素を作成する

そして、それらを要素に追加する方法: 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;
  }
}
于 2013-01-14T22:00:17.273 に答える