如何修復不起作用的重啟按鈕

我制作了一張抽認卡，它會顯示我保存在陣列中的問題，然后單擊以獲取其他問題。但是如果在中間我點擊了重新啟動按鈕，我就會遇到問題。例如，我有 6 個問題，當進度為 3 時單擊重新啟動，進度將重置為 1，并將問題從 1 運行到 6，但在我的代碼上它是 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>

uj5u.com熱心網友回復：

檢查這是否適合您：

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>

標籤：javascript html

上一篇：javascript如何將變數設定為雙向相等？

下一篇：未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“公司名稱”）JS物件