如何在[JavaScript]中实现分页

我的下一步按钮在我的测验休息，如果我回答了一个特定的问题，然后返回几个问题，然后继续进行测验。点击“下一步”后，即使已经选择了答案，在重新选择答案之前，您将无法继续

完整的JSFIDLE:

问题在于：（第121行）

单击“下一步”按钮时，将禁用该属性。我想我需要打包

document.getElementById('btnNxt').setAttribute('disabled', true);

在if语句中，检查是否已经提供了答案或答案是否在新问题上

在设置属性之前，我试图创建一些东西来检查是否有一个值为myAns的类，但没有太大成功

var element = document.getElementsByClassName('btnAns');
for(var i = 0; i < element.length; i++){
   if(element[i].classList.contains('selAnswer')) {
      document.getElementById('btnNxt').setAttribute('disabled', true);
      break;
   } else {
      document.getElementById('btnNxt').removeAttribute('disabled');
   }
   console.log(element[i].classList.contains('selAnswer'));
}

var-element=document.getElementsByClassName（'btnAns'）；
对于（变量i=0；i

我认为您需要将这个“如果这个问题已经有答案”检查到您的

buildquick

函数中，因为所选答案只有在生成下一个（但先前已回答的）问题后才对DOM查询可见：

function buildQuiz(pg) { 
    //code omitted for clarity...
    if (page >= 0) { 
       //code omitted for clarity...

      } else {
        //code omitted for clarity..

        if(!document.querySelector('.selAnswer')) {
           document.getElementById('btnNxt').setAttribute('disabled', true);
            console.log("no answer yet, disabling button.");       
        } else {
            console.log("success! we found an answer, enabling button.");
        }
      }
    }
  } 

var startButton=document.getElementById（“startButton”）；
addEventListener（“单击”，开始单击）；
函数startClick（）{
/*声明要在整个测验中使用的全局变量*/
var output=document.getElementById（'output'）；//为元素“output”声明变量输出
var btn=document.getElementsByClassName（'btnAns'）；//为类“btnAns”声明一个变量
var myObj=''；//将变量myObj声明为空字符串
var page=0；//声明变量page并将其设置为0
var result=0；//声明变量result并将其设置为0
var myqueryep=[]；//声明变量myqueryep并设置为空数组
loadQuestions（）；//启动函数loadQuestions以引入数据
/*创建一个函数来检索JSON对象。一旦检索到对象，启动buildquick函数*/
函数loadQuestions（）{//创建一个名为loadQuestions的函数
var xhttp=new XMLHttpRequest（）；//声明变量xhttp并将其赋值以创建新的XMLHttpRequest
xhttp.open（'GET'，'https://api.myjson.com/bins/1453rb",对),//
xhttp.onreadystatechange=函数（）{//
if（this.readyState==4&&this.status==200）{//如果XMLHttpRequest readyState为4，状态代码为200
myObj=JSON.parse（this.responseText）；//指定全局变量myObj将JSON字符串解析为JavaScript对象
buildquick（0）；//通过值0触发buildquick函数
}
}
xhttp.send（）；//将XMLHttpRequest发送到服务器
}
document.getElementById（'btnNxt'）.setAttribute（'disabled'，true）；//禁用下一步按钮，直到提供答案
/*创建用于生成测验的函数*/
函数buildquick（pg）{//使用变量pg创建一个名为buildquick的函数，该变量包含在激发时通过该函数传递的值0
page=pg；//将pg指定给全局变量页
hideshow（）；//激发hideshow函数
如果（page>=0）{//检查变量page是否大于或等于0
如果（myObj.length<（第+1页））{//检查对象
page=myObj.length；
var holderHTML=''；
var得分=0；
var answerTxt=''；
用于（myObj中的var项目）{
if（myObj[item].correct==myqueryp[item]）{
分数++；
answerTxt='
'+myObj[item]。答案[myqueryp[item]]+'
'；
}否则{
answerTxt='
'+myObj[item]。答案[myqueryp[item]]+'
'；
}
holderHTML+='问题：'+myObj[item]。问题+''+answerTxt+''；
}
var结果=“”；
如果（分数==0）{
结果=‘一个傻瓜！’；
}否则，如果（（分数/长度）*100=页）{
document.getElementById（'btnPre'）.style.display='none'；
}否则{
document.getElementById（'btnPre'）.style.display='block'；
}
如果（myObj.length，我建议在myObj上使用mySel对象。这样，您就不依赖css和类，而是依赖于您使用的数据

function buildQuiz(pg) { 
    //code omitted for clarity...
    if (page >= 0) { 
       //code omitted for clarity...

      } else {
        //code omitted for clarity..

        if(!document.querySelector('.selAnswer')) {
           document.getElementById('btnNxt').setAttribute('disabled', true);
            console.log("no answer yet, disabling button.");       
        } else {
            console.log("success! we found an answer, enabling button.");
        }
      }
    }
  } 

   //event listeners
   btnPre.onclick = function() {
      buildQuiz(page - 1);
      document.getElementById('btnNxt').removeAttribute('disabled');
   }

   btnNxt.onclick = function() {
      if (document.getElementById('btnNxt').hasAttribute('disabled')) {
         return false;
      }
      // change is here. Checking to see if next question has been answered.
      if (typeof myObj[page + 1].mySel === "undefined") {
         document.getElementById('btnNxt').setAttribute('disabled', true);
      }

      buildQuiz(page + 1)
   }