Question

我创建了一个互动测验，并创建了显示下一个问题的功能，并回到之前的问题。我的问题是，当它改变问题时，我输入的信息将被删除。例如问题1和问题2，我会写一个动物，然后我进入问题3，但当我回到问题1和2时，我写的动物已经消失了。与收音机选择相同。对不起，如果代码繁琐，我刚刚开始。关于如何解决这个问题的任何提示？

测验链接：https://repl.it/GSiI/latest

    function initialize()
    {
      questionList = document.getElementsByClassName("questions");
      quizOutput = document.getElementById("showQuiz");
      beginBtn = document.getElementById("initiate");
      button = document.getElementById("button");
      next = document.getElementById("next");
      previous = document.getElementById("previous");
      questionIndex = 0;
      totalQuestions = questionList.length - 1;
    }

    function beginQuiz()
    {
     currentQuestion = questionList.item(questionIndex).innerHTML;
     button.style.visibility = "visible";
     quizOutput.innerHTML = currentQuestion;
     beginBtn.style.display = "none";
     quizOutput.style.display = "block";
    }

    function changeQuestion(factor)
    {
       if(factor == -1 && questionIndex > 0)
       {
        questionIndex--;
        currentQuestion = questionList.item(questionIndex).innerHTML;
        quizOutput.innerHTML = currentQuestion;
       }
       if(factor == 1 && questionIndex < totalQuestions)
       {
        questionIndex++;
        currentQuestion = questionList.item(questionIndex).innerHTML;
        quizOutput.innerHTML = currentQuestion;
       }
   }

    function writeNumber(el, num)
    {
     input = document.getElementById(el);
        if(input.value.length < 2)
        {
            input.value += num;
        }
    }

    function clearAnswer(el) 
    {
     document.getElementById(el).value = "";
    }

    function takeValues() 
    {
     var x = document.getElementById("frm1");
     var text = "";
     var i;
     for (i = 0; i < x.length ;i++) 
        {
          text += x.elements[i].value + "<br>";
        }
     document.getElementById("demo").innerHTML = text;
    }

Answer 1

因为每次加载不同的问题时，实际上都是删除DOM元素而不保存它们。当您返回上一个问题时，您无法从任何地方加载其值。您需要在应用中构建一个状态才能使其正常工作。

Answer 2

我建议使用javascript FormData对象来获取输入值的条目。首先删除所有＆＃34;表格＆＃34;你的HTML中的元素，但保持其内在元素。然后制作＆＃34; showQuiz＆＃34; div成 form 元素。然后创建1个单个表单（我将此表单设置为id＆＃34; form1＆＃34;）以包含所有问题和提交按钮。然后修改javascript函数changeQuestion如下：

function changeQuestion(factor)
{
  var myform = document.getElementById("showQuiz");
  var fdata = new FormData(myform);
  var storeForm = document.getElementById("form1");
  var sdata = new FormData(storeForm);
  for (var pair of fdata.entries()) {
    var elem = document.getElementsByName(pair[0])[0];
    storeForm.elements[pair[0]].value = pair[1];
  }
  if(factor == -1 && questionIndex > 0)
  {
    questionIndex--;
    currentQuestion = questionList.item(questionIndex).innerHTML;
    quizOutput.innerHTML = currentQuestion;
  }
  if(factor == 1 && questionIndex < totalQuestions)
  {
    questionIndex++;
    currentQuestion = questionList.item(questionIndex).innerHTML;
    quizOutput.innerHTML = currentQuestion;
  }
  myform = document.getElementById("showQuiz");
  storeForm = document.getElementById("form1");
  fdata = new FormData(myform);
  sdata = new FormData(storeForm);
  for (var pair of sdata.entries()) {
      var fld = myform.elements[pair[0]];
      if (fld)
        fld.value = pair[1];
  }
}

交互式测验：隐藏时如何保持输入值？

2 个答案: