如何制作一个 function 来跟踪单击按钮的次数

Question

我正在尝试使它在单击next-btn 2 次后显示game按钮。 因此，在多项选择测试被回答 2 次后，我希望显示游戏按钮，以便将用户引导到一个单独的 html ，该按钮已经设置为agario.html 。

正如您在 js 中看到的那样，我已经尝试过代码

function clickme() { 
  clicks += 1; 
  document.getElementById('next-btn').innerHTML = click;
  if (clicks == 2) {
    game.classList.remove('hide')
  }
}

但这似乎不起作用？ 有任何想法吗？

 const startButton = document.getElementById('start-btn') const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container') const questionElement = document.getElementById('question') const image1 = document.getElementById('image1') const answerButtonsElement = document.getElementById('answer-buttons') const endbutton = document.getElementById('end-btn') const trybutton = document.getElementById('try-btn') const startmsgs = document.getElementById('startmsg') const game = document.getElementById('agar') var clicks = 0; let shuffledQuestions, currentQuestionIndex startButton.addEventListener('click', startGame) nextButton.addEventListener('click', () => { currentQuestionIndex++ setNextQuestion() changeImg() }) function clickme() { clicks += 1; document.getElementById('next-btn').innerHTML = click; if (clicks == 2) { game.classList.remove('hide') } } endbutton.addEventListener('click', () => { window.top.close() }) trybutton.addEventListener('click', setNextQuestion) function startGame() { startButton.classList.add('hide') startmsgs.classList.add('hide') shuffledQuestions = questions.slice() questionContainerElement.classList.remove('hide') currentQuestionIndex = 0 setNextQuestion() } function setNextQuestion() { resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question) { questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct) { button.dataset.correct = answer.correct } button.addEventListener('click', selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState() { clearStatusClass(document.body) nextButton.classList.add('hide') while (answerButtonsElement.firstChild) { answerButtonsElement.removeChild(answerButtonsElement.firstChild) } trybutton.classList.add('hide') } function selectAnswer(e) { const selectedButton = e.target const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) setStatusClass(selectedButton, correct); if(correct){ if (shuffledQuestions.length > currentQuestionIndex + 1) { nextButton.classList.remove('hide') } else { endbutton.classList.remove('hide') } } else{ trybutton.classList.remove('hide') } } function setStatusClass(element, correct) { clearStatusClass(element) if (correct) { element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element) { element.classList.remove('correct') element.classList.remove('wrong') } const questions = [ { question: 'Are you excited to learn about the immune system?', answers: [ { text: 'Yes', correct: true }, { text: 'YES,:,': correct, true }: { text, 'No': correct, false }: { text, 'YES:,.,,,:': correct, true } ] }: { question, 'Our immune system protects from the thousands of different viruses we encounter daily, Without it: a simple paper cut could mean death, So to demonstrate how the immune system functions to protect us from bacterias. viruses and foreign bodies. we start our journey with a paper cut,': answers: [ { text, 'I am exicted:', correct, true }, ] }, { question: 'Paper cuts might seem like a very light injury, but the cut provides an opening for things that do not belong in the body to enter the body. For this activity we are only assuming that a bacteria enters the body and trace the bacteria through its journey in our body and its interactions with our immune system.', answers: [ { text: 'Got it!', correct: true }, ] }, ]

 *, *::before, *::after { box-sizing: border-box; font-family: cursive, 'Times New Roman', Times, serif } #particles-js { position: absolute; width: 100%; height: 100%; /* background-color: #b61924; */ background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: 1; }:root { --hue-neutral: 200; --hue-wrong: 0; --hue-correct: 145; } body { --hue: var(--hue-neutral); padding: 0; margin: 0; display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; background-color: hsl(var(--hue), 100%, 20%); } body.correct { --hue: var(--hue-correct); } body.wrong { --hue: 0; }.container { width: 1000px; max-width: 80%; background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; z-index: 2; position: absolute; }.btn-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 10px; margin: 20px 0; }.btn { --hue: var(--hue-neutral); border: 1px solid hsl(var(--hue), 100%, 30%); background-color: hsl(var(--hue), 100%, 50%); border-radius: 5px; padding: 5px 10px; color: white; outline: none; }.btn:hover { border-color: black; }.btn.correct { --hue: var(--hue-correct); color: black; }.btn.wrong { --hue: var(--hue-wrong); }.next-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; align-items: flex-end; --hue: 245; }.start-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.end-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.try-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; --hue: 245; }.container1 { display: flex; justify-content: center; align-items: center; font-family: Arial; font-size: xx-large; padding: 10px 10px; }.container2 { display: flex; align-items: center; justify-content: center; position: relative; }.controls { display: flex; justify-content: center; align-items: center; }.hide { display: none; }.wrapper { position: absolute; top: 0px; right: 0px; z-index: 2; }.blob { width: 100%; height: 100%; z-index: 1; } a:link, a:visited { --hue: var(--hue-neutral); border: 1px solid hsl(var(--hue), 100%, 30%); background-color: hsl(var(--hue), 100%, 50%); border-radius: 5px; padding: 5px 10px; color: white; outline: none; font-size: 1.5rem; font-weight: bold; padding: 10px 20px; align-items: flex-end; --hue: 245; text-decoration: none; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script defer src="script.js"></script> <title>Quiz App</title> </head> <body> </div> <div class="container"> <div class="container2"> <img name="slide"> </div> <div id="question-container" class="hide"> <div id="question">Question</div> <div id="answer-buttons" class="btn-grid"> <button class="btn">Answer 1</button> <button class="btn">Answer 2</button> <button class="btn">Answer 3</button> <button class="btn">Answer 4</button> </div> </div> <div class="container1"> <div id="startmsgcontainer" class="hide"></div> <div id="startmsg">Adventure Into The Human Immune System</div> </div> <div class="controls"> <button id="start-btn" class="start-btn btn">Start.</button> <button id="next-btn" class="next-btn btn hide">Next</button> <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button> <button id="try-btn" class="try-btn btn hide">Try again.</button> <a id="agar" href="agario.html" class="hide">Game Time.</a> </div> </div> <div class="wrapper"> <img src="img/uni.png" alt="image"> </div> </div> <div id="particles-js"></div> <script src="particles.js"></script> <script src="app.js"></script> <script src="slide.js"></script> </body>

Answer 1

您已经为下一个按钮声明了一个事件侦听器，但是您从未触发方法“clickme”来记录点击。

nextButton.addEventListener('click', () => {
   currentQuestionIndex++;
   setNextQuestion();
   changeImg();
   //function you are using to record clicks.
   clickme();
});

Answer 2

您实际上不会在任何地方调用clickme function。 因此，您需要将其添加到下一个按钮单击处理程序。

nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
  changeImg()
  clickme();
})