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

我创建了一个交互式测验，并创建了显示下一个问题并返回到前面问题的函数。我的问题是，当它更改问题时，我输入的信息会被删除。比如问题1和2，我会在一只动物身上写，然后我会进入问题3，但当我回到问题1和2，我写的动物就不见了。收音机的选择也是如此。抱歉，如果代码很乏味，我只是开始。关于如何解决这个问题有什么建议吗

问答环节：

函数初始化（）
{
questionList=document.getElementsByClassName（“问题”）；
quizOutput=document.getElementById（“showquick”）；
beginBtn=document.getElementById（“启动”）；
button=document.getElementById（“按钮”）；
next=document.getElementById（“next”）；
previous=document.getElementById（“previous”）；
问题指数=0；
totalQuestions=questionList.length-1；
}
函数beginquirz（）
{
currentQuestion=questionList.item（questionIndex）.innerHTML；
button.style.visibility=“可见”；
quizOutput.innerHTML=currentQuestion；
beginBtn.style.display=“无”；
quizOutput.style.display=“block”；
}
功能变化问题（因素）
{
如果（因子==-1&&questionIndex>0）
{
问题索引--；
currentQuestion=questionList.item（questionIndex）.innerHTML；
quizOutput.innerHTML=currentQuestion；
}
如果（因子==1&&questionIndex”；
}
document.getElementById（“demo”）.innerHTML=text；
}

这是因为每次加载不同的问题时，实际上是在删除DOM元素而不保存它们。当您返回到前面的问题时，您不会从任何地方加载它们的值。你需要在你的应用程序中建立一个状态，它才能工作。

我建议使用javascript FormData对象来获取输入值的条目。 首先从html中删除所有“表单”元素，但保留其内部元素。 然后将“showquick”div设置为表单元素。 然后创建一个单独的表单（我将此表单设置为id为“form1”），以包含所有问题和提交按钮。 然后修改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];
  }
}

功能更改问题（系数）
{
var myform=document.getElementById（“showquick”）；
var fdata=新表单数据（myform）；
var storeForm=document.getElementById（“form1”）；
var sdata=新表单数据（storeForm）；
for（fdata.entries（）的变量对）{
var elem=document.getElementsByName（对[0]）[0]；
storeForm.elements[pair[0]].value=pair[1]；
}
如果（因子==-1&&questionIndex>0）
{
问题索引--；
currentQuestion=questionList.item（questionIndex）.innerHTML；
quizOutput.innerHTML=currentQuestion；
}
如果（因子==1&&questionIndex

你可以用很多方法剥这只猫的皮。最简单的方法是使用全局变量或全局对象来存储答案。您应该在此处发布代码，否则您的问题可能会被关闭

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