jquery - Javascript Quiz not progressing to next -

i trying make quiz whereby question displayed 1 question @ time , in total, users need answer 3 questions correctly before allowed progress. @ time, if user answer question wrongly, user directed gameover page.

i have managed set randomised questions appear , when user chooses wrong answer, directed gameover page.

at point, stuck @ part showing question1, though user has selected correct answer.

could on how call next question when user has selected correct answer current question?

thanks

var questionorder = ["q1", "q2", "q3"];    var answerorder = [    ["yes", "no"],    ["yes", "no"],    ["yes", "no"]  ];  var correctanswers = ["1", "2", "2"];    //to set random question  var random_questionindex = math.floor(math.random() * questionorder.length);    //assign variable generate random question quiz  var question = questionorder[random_questionindex];  var answerlist = answerorder[random_questionindex];    function showquestion() {    //randomise question    //code generate random question quiz    answerindex = "";      $('#question_list').html(question);    //generate random answers in relation questions    $('#stbanswer_01').hide();    $('#stbanswer_02').hide();    $('#stbanswer_03').hide();    //$('#stbanswer_04').hide();      (i = 0; < answerlist.length; i++) {      $('#stbanswer_0' + (i + 1)).attr('src', answerlist[i]);      $('#stbanswer_0' + (i + 1)).show();    }  }    function selectstbanswer(index) {    answerindex = index + "";    console.log(answerindex);    console.log(correctanswers[random_questionindex]);    //conditional answer check; if answer wrong, gameover, else proceed next question    if (correctanswers[random_questionindex] != answerindex) {      console.log("incorrectanswer");      $('#qna').fadeout({        duration: slideduration,        queue: false      });      $('#gameover').fadein({        duration: slideduration,        queue: false      });    } else {          console.log("correctanswer");      (i = 0; < 3; i++) {        $('#question_list').fadeout();        $('#stbanswer_01').fadeout();        $('#stbanswer_02').fadeout();        $('#stbanswer_03').fadeout();      }      }  }

<div id="qna" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px; ">      <div id="question_list" style="position:absolute; z-index=99; width:900px; height:200px; top:50px; left:100px; font-size:45px; font-family:'helveticaneue'; color:#fff;"></div>      <img id="stbanswer_01" style="z-index=99; position:absolute; top:250px; left:50px; border:0px;" onclick="selectstbanswer('1');">    <img id="stbanswer_02" style="z-index=99; position:absolute; top:350px; left:50px; border:0px;" onclick="selectstbanswer('2');">    <img id="stbanswer_03" style="z-index=99; position:absolute; top:450px; left:50px; border:0px;" onclick="selectstbanswer('3');">  </div>    <div id="gameover" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; ">    game on  </div>

i stuck @ when user selects correct answer , doesn't transition next question stuck @ currect 1st question.

please help. thanks.

with modified html (i added classes class="answers", alt make images valid , modified style make easier , see) resisted removing style markup , putting in css should be.

still bit messy can clean before production release.

run few times here: https://jsfiddle.net/markschultheiss/3vr1t002/

<div id="qna" align="center">   <div id="question_list" style="position:absolute; z-index=99; width:400px; height:100px; top:50px; left:100px; font-size:45px; font-family:'helveticaneue'; color:green;"></div>    <img id="stbanswer_01" alt="first" class="answers" style="z-index=99; position:absolute; top:100px; left:50px; border:0px;">   <img id="stbanswer_02" alt="secon" class="answers" style="z-index=99; position:absolute; top:200px; left:50px; border:0px;">   <img id="stbanswer_03" alt="third" class="answers" style="z-index=99; position:absolute; top:300px; left:50px; border:0px;"> </div>  <div id="gameover" align="center" style="position:absolute; height:1920px; width:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:0px; ">   game on </div> 

code:

console.clear(); var myquiz = myquiz || {   questionorder: ["q1", "q2", "q3"],   answerorder: [     ["yes", "no"],     ["yes", "no", "maybe"],     ["yes", "no"]   ],   correctanswers: ["1", "2", "2"],   numbercorrect: 0 };  var question, answerlist, random_questionindex; //temp answer variable var answerindex = ""; var slideduration = 100;  function getrandom() {   //to set random question   random_questionindex = math.floor(math.random() * myquiz.questionorder.length);   console.log("rqi" + random_questionindex);   //assign variable generate random question quiz   question = myquiz.questionorder[random_questionindex];   answerlist = myquiz.answerorder[random_questionindex];   $('#question_list').html(question);   //generate random answers in relation questions   $('.answers').hide();   (var = 0; < answerlist.length; i++) {     $('.answers').eq(i).attr('src', answerlist[i]).show();   } }   function selectstbanswer(index) {   answerindex = index + "";   console.log(answerindex);   console.log(myquiz.correctanswers[random_questionindex]);   //conditional answer check; if answer wrong, gameover, else proceed next question   if (myquiz.correctanswers[random_questionindex] != answerindex) {     console.log("incorrectanswer");     $('#qna').fadeout({       duration: slideduration,       queue: false     });     $('#gameover').fadein({       duration: slideduration,       queue: false     });   } else {      console.log("correctanswer");     myquiz.numbercorrect++;     getrandom();     (i = 0; < 3; i++) {}   } } $('.answers').on('click', function() {   var index = $(this).index();   selectstbanswer(index);   if (myquiz.numbercorrect === 3) {     alert("winner winner chicken dinner");     myquiz.numbercorrect = 0;   } }); getrandom();