Необходимо дважды нажать кнопку, чтобы событие сработало

Question

В этой простой викторине есть кнопка следующего вопроса. После запуска игры, нажав кнопку запуска игры, появится первый вопрос с ответами. При нажатии кнопки следующего вопроса первый вопрос и ответы все еще видны, только после второго нажатия появляется второй вопрос. В фоновом режиме, хотя второй вопрос был нацелен на первый щелчок, только невидимый. Пробовал несколько возможных решений, но ни одно из них не помогло.

// Methods part of ES6 class Question
displayQuestion() {
     document.querySelector('.question').textContent = this.question
                let i = 0
                let answer = this.answers
            for(let el of answer){
                let html = `<li class="name" id=${i}>${el}</li>`
                document.querySelector('ul').insertAdjacentHTML('beforeend',html)
                i++ 
            }
 }

getAnswer(id){
        if(id == this.correct) {
            //console.log('Hooray!')
            document.querySelector('.modal1').style.display = "flex";
            document.querySelector('.modal').style.display = "block";
           
        }else{
            //console.log('Wrong answer!')
            document.querySelector('.modal2').style.display = "flex";
            document.querySelector('.modal').style.display = "block";
        }
        
    }
}

const questions = [q1, q2, q3, q4, q5];
let runningQuestion;
let gamePlaying;

init()

document.querySelector('.button1').addEventListener('click', nextQuestion)
function nextQuestion() {

if(gamePlaying && runningQuestion <= questions.length - 1){
    clearAnswers()
    document.querySelector('.button1').textContent = 'Next Question'
    questions[runningQuestion].displayQuestion()
    questions[runningQuestion].displayAnswers()
    runningQuestion++
}
if(runningQuestion >= questions.length){
    document.querySelector('.button1').textContent = 'Try again!'
    runningQuestion = 0
   }
}

document.querySelector('.answers').addEventListener('click', possibleAnswers)
function possibleAnswers(e){
    console.log(e.target)
    if(e.target && e.target.matches("li.name")){
      let item = e.target.id
        let id = parseInt(item)
        questions[index].getAnswer(id) 
       }
 }


function init() {
   clearAnswers()
   document.querySelector('.question').textContent = ""
   gamePlaying = true
   runningQuestion = 0
   questions[runningQuestion].displayQuestion()
   questions[runningQuestion].displayAnswers()
}

Answer 1

Вы можете использовать этот код, чтобы получить количество кликов, и if (clicks >= 2), чтобы сделать все остальное

var clicks = 0;

function myFunction() {
  clicks += 1;
  console.log(clicks)
}

<input type="button" onclick = "myFunction()" />

Answer 2

Дикое предположение

if(gamePlaying) {
  clearQuestion()
  clearAnswers()
  questions[index].displayQuestion()
  index++
}

Я думаю, вам следует увеличить индекс, а затем вызвать функцию.

index++
questions[index].displayQuestion()