how to fixed the restart button which not working-CodePudding

I've make a flashcard that will show questions that I save on array and next click to get another questions. But I have a problems if in the middle i've click the restart button. for example, I have 6 questions and I click restart when the progress on 3, the progress will reset to 1 and will run the question from 1 till 6, but on my code it's continue 4 5 6.

var btnRestart=document.getElementById("restart");
var btnNext=document.getElementById("next");
var words = [{
     question: "HTML stands for",
     answer: "HyperText Markup Language"
   },
   {
     question: "What is a href?",
     answer: "Link location attribute"
   },
   {
     question: "What is extensions used to save HTML pages?",
     answer: ".html"
   },
  {
    question: "What type of video formats are supported by HTML5",
    answer: "MP4, WebM, Ogg"
  },
  {
   question: "What is _blank target attribute?",
   answer: "It is opens the document in a new window or tab"
    },
 {
   question: "How to handle events in HTML?",
    answer: "Using javaScript or jQuery."
 },
{
   question: "What is _parent target attribute?",
   answer: "It is opens the document in a parent frame"
 }
];

randomQuestions();
var count = 1;

function randomQuestions() {
  count  ;

   var tempWords = [];

   for (var i = 0; i < words.length; i  ) {
     tempWords.push(i);
   }

//last question
if (tempWords.length === 1) {
  btnNext.style.display = 'none';
}

let index = Math.floor(Math.random() * tempWords.length);
const question = words.splice(index, 1)[0]
document.getElementById("question").innerHTML = question.question;
}

btnNext.addEventListener('click', function(){
  randomQuestions();        
});

btnRestart.addEventListener('click', function() {
randomQuestions();
tempWords = [];
 count = 1;
})

HTML

<div id="question">
  <h4>Questions</h4>
</div>

<button id="next">Next</button>
<button id="restart">Restart</button>

CodePudding user response：

Check if this may work for you:

var btnRestart = document.getElementById("restart");
var btnNext = document.getElementById("next");
const questionElem = document.getElementById("question")
var count = 0;
var words = [{
    question: "HTML stands for",
    answer: "HyperText Markup Language"
  },
  {
    question: "What is a href?",
    answer: "Link location attribute"
  },
  {
    question: "What is extensions used to save HTML pages?",
    answer: ".html"
  },
  {
    question: "What type of video formats are supported by HTML5",
    answer: "MP4, WebM, Ogg"
  },
  {
    question: "What is _blank target attribute?",
    answer: "It is opens the document in a new window or tab"
  },
  {
    question: "How to handle events in HTML?",
    answer: "Using javaScript or jQuery."
  },
  {
    question: "What is _parent target attribute?",
    answer: "It is opens the document in a parent frame"
  }
];
let leftWords = [...words]


randomQuestions();


function randomQuestions() {

  if (count === words.length - 1) btnNext.style.display = 'none';

  const idx = Math.round(Math.random() * (leftWords.length - 1))
  console.log("RANDOM IDX", idx, "QUESTIONS LEFT:", leftWords.length)
  questionElem.innerHTML = leftWords[idx].question;
  leftWords.splice(idx, 1)
  count  ;

}

btnNext.addEventListener('click', randomQuestions);

btnRestart.addEventListener('click', function() {
  btnNext.style.display = 'inline';
  count = 0
  leftWords = [...words]
  randomQuestions();
})

<div id="question">
  <h4>Questions</h4>
</div>

<button id="next">Next</button>
<button id="restart">Restart</button>